New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[F6] [Dropdown Menu] Dropdown opens off-screen with right-aligned menu (not RTL text) #7067
Comments
My mistake. The example code still had the .align-right class applied. A live version of this issue is below. In addition, I've noticed that the link in the dropdown doesn't seem to work. <nav class="title-bar" role="navigation">
<section class="title-bar-left">
<span class="title-bar-title"><a href="/">Example Right Dropdown</a></span>
</section>
<section class="title-bar-right">
<ul class="dropdown menu" data-dropdown-menu role="menubar">
<li class="has-submenu">
<a href="javascript:void(0);">Menu</a>
<ul class="submenu menu" data-submenu role="menu">
<li><a href="/menu-item">Menu Item</a></li>
</ul>
</li>
</ul>
</section>
</nav> |
You will need the align-right class applied, as that implies all sub-menus should attach to their parent from the submenus right side. |
This also makes everything render in reverse order, which is not desirable. The classes .top-bar-right and .title-bar-right should do this, and as mentioned above, used to do exactly that. We shouldn't need to add additional markup and shuffle around the menu lists, especially for functionality Foundation had in v5. |
After digging through the CSS a bit, it looks like the right-aligned bar used to apply the following to dropdowns, but no longer does. position: absolute;
left: auto;
right: 0; |
The code below was sufficient to get it working like Foundation 5 used to. I'm not sure how to do this in SCSS format, though. .top-bar-right .dropdown.menu .menu,
.title-bar-right .dropdown.menu .menu {
position: absolute;
left: auto;
right: 0;
} |
This should be fixed now, please reopen if still an issue. |
Again, not only is that a redundant class to add, given the .top-bar-right/.title-bar-right class above it, but it uses float, which reverses the order of the bar-level menu items. This is most definitely not desired behavior. |
I'm going to leave this one for @gakimball to resolve this in the scss, but here's a working solution for now: Cheers. |
When using right-aligned menus, but not RTL text orientation (not using the .align-right class), dropdown menus still open aligned to their parent's left side. Such dropdowns should align instead to their parent's right side to appear on-screen as expected. This worked just fine in Foundation 5 without additional markup on any involved elements.
The following code will reproduce the issue with Foundation v6.0.1
Included CSS: Foundation v6.0.1, Normalize v3.0.3
Included JS: Foundation v6.0.1, jQuery v2.1.4
The text was updated successfully, but these errors were encountered: