New "Inline" option in Dropdown Element breaks children width setting

@charlie The new “Inline” toggle setting within the dropdown element does not all me to set the dropdown children to a set width. see here:

Menu is named “Header MegaMenu” and can be tested on the page /menu-preview/

In your instance you could use 100vw as the value for the dropdown width. We might be able to fix something for percentage based values on our end, but I’ll have to look into this more. Have a great day.

1 Like

Here is what 100vm does. It does not seem to be working as expected:

Hey @calebja,

When you enable the “Inline” option, the Dropdown Content will position itself to the Container.

In this screenshot above, there is a gap because, in your GRID element settings, the Global Container is set to default settings of 88% width. If you use 100% you will get something like this:

The width of the Dropdown Content is still 100vm. You are not setting the rest because it goes beyond the browser width. If you disable the “Inline” option, the Dropdown Content will be positioned at the center of the Bar element.

Hope this helps.

Hi @ruenel thanks for your reponse. The reason I am using “inline” is because I need the menu to be able to meet accessibility standards, and it doesn’t unless the “inline” option is selected. This is because a user needs to be able to navigate through the menu using the tab button on the keyboard. Inline accomplishes this. Is there anyway I can get the menu to display properly while using the inline option?

We’ll have to take a deeper look at certain instances of the inline and try see what we can do about certain width settings and positioning issues. There have been a couple of other users with similar styling issues. Have a great day.

ok thanks @charlie. I am waiting on this ability before launching a new menu for a client. Do you have a general timeframe that you think this might be addressed? Thanks for any insight.

Hi @calebja,

You are most welcome.