I am creating a sidebar menu which standard is small with only icons, some Icons will display a group focus to directly add a thing. There is also a menu toggle which expands the menu. So far so good.
I want to have the sidebar 100% of viewport height so I set vertical float to both and made the floating group the same height as the page. Problem is that when I want to put everything into a reusable element, the floating to 100% of viewport height breaks.
How can I solve this? I really would like to have this sidebar and all the UX stuff to be part of a reusable element. Thanks!
Hi @FJP I have a very similar setup, and couldnât find a way to have the floating group stretch the height of the page as a reusable element. Iâm sure youâve thought of this as well, but I have individual floating groups on each page (not reusable) that stretch the height of the page, and the menu itself is all within a regular group reusable element, thatâs then placed into each floating group. In the screenshot below the FG - Navigation is the floating group, and the desktop navigation reusable element is within each of those floating groups:
Thanks @fayewatson . Do you made a separate desktop menu and a separate mobile menu? I was trying to combine these so that I didnât need to configure Link settings of the the menu items twice. But on the other hand it does make all the conditional formatting and show/hide element settings quite a bit more complex. What are your thoughts on this?
No problem at all! I use two separate menus (desktop menu and mobile menu) but thatâs only because the mobile menu has more navigation links and a slightly different design than the desktop navigation reusable element.
They have the same overall setup though (a regular group reusable element is used for each menu, and those are placed in floating groups). The reusable mobile menu also has a âslide outâ animation when it becomes visible; when that action occurs, another grey transparent floating group becomes visible to âgrey outâ the rest of the page:
Hi @shpak.serhiy as long as the floating groupâs height is the exact same height as the pageâs height in the editor, and the floating group is set to float:both, it should adjust automatically. If you have those settings already and itâs not adjusting, feel free to share a link to your app editor and Iâd be happy to take a look!
Hi @FJP If you anticipate that you will have some mobile pages with only the expanded menu (for example, if you have a different menu button that becomes visible at mobile width, and clicking it automatically shows the expanded menu), then it may be easier to set the expanded menu as its own reusable element. Then, you can place the expanded menu reusable element in the skinnier menu reusable element.
If youâre not going to have that setup, and both menu styles are only going to be used together, then itâs probably easier to keep it as one reusable element.
Ehh, maybe. I would agree that in general responsiveness is pretty straightforward. But I still canât figure out how to get a floating group that I am using as a side nav bar to stretch the whole page no matter what.
So for example I have it set as same height as page, but if someone is on a bigger screen or zooms out then it is no longer full page height.
As you can see the main group for the page is behaving as expected, but the Side bar does not. I have both of these elements set up with the same settings. So one of the only things I can think of is the fact that it is in a reusable?
I have a very similar setup, and couldnât find a way to have the floating group stretch the height of the page as a reusable element. Iâm sure youâve thought of this as well, but I have individual floating groups on each page (not reusable) that stretch the height of the page, and the menu itself is all within a regular group reusable element, thatâs then placed into each floating group. In the screenshot below the 
as long as the floating groupâs height is the exact same height as the pageâs height in the editor, and the floating group is set to float:both, it should adjust automatically. If you have those settings already and itâs not adjusting, feel free to share a link to your app editor and Iâd be happy to take a look!
