How to create a responsive horizontal list
Application Type
Reactive

Hi forum,

I am trying to create a responsive horizontal list that will hide the options that would be shown on a new line and then show an ellipsis icon that you can click to open a vertical list with the remaining options. Very similar to this example: https://codepen.io/Dreamdealer/pen/waVzmK

But I am having trouble translating the example into an "OutSystems version".

Has anyone done something like this and wishes to share how?

Regards,
Alfio Esposito

Hey Alfio,


I know OutSystems UI components/widgets are already responsive: https://success.outsystems.com/Documentation/11/Developing_an_Application/Design_UI/Look_and_Feel/Responsive_UI

Also the layouts should provide responsive menus.


Regards,

Bogdan

Hi,

In OutSystems Reactive, menu structure from your example codepen is quite easy to replicate with something as shown below, but as usual, there's some OutSystems generatedwrapper div and original CSS needs to be modified a bit.

 

With this structure, quick fix seemed to be removing all '>' chars from example CSS between ul and li ('nav > ul > li' becomes 'nav > ul li') and add .horizontal--menu class definition in front of all example CSS definitions for extra measure. 

Biggest headache for you to getting this to work is probably replicating that javascript function used to calculate menu width and moving list items around using only vanilla JS, as your example seems to use jQuery syntax. You should get started by using document.querySelector and offsetWidth, along with basic list iteration and element classList manipulation.

Hope this helps!

Thanks a lot Mikko for thinking along. This is a very good starting point. Like you said, getting the javascript part to work will be a challenge. Gonna start on that as soon as I can. 

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.