Menu icon Foundation
Dropdown positioning

I'm having problems displaying a dropdown when it's located at the right edge of the screen. The options does not have the proper width. I'm using Foundation 5.0.2. And the dropdown is inside a tabbar

Dropdown

<nav class="tab-bar">
  <section class="left-small">
    <a class="left-off-canvas-toggle"><i class="fa fa-bars"></i></a>
  </section>
  <section class="middle tab-bar-section">
    <h1 id="tabbar-title" class="title">Home</h1>
  </section>
  <section class="right-small phe-mb-tabbar-right-menu">
    <a href="#" data-dropdown="options-menu"><i class="fa fa-th-large"></i></a>
    <ul id="options-menu" class="tiny f-dropdown" data-dropdown-content data-options="right_align:true">
      <li><a href="#">Option 1</a></li>
      <li><a href="#">Option 2</a></li>
      <li><a href="#">Option 3</a></li>
    </ul>
  </section>
</nav>
            

         

dropdownpositionbutton

I'm having problems displaying a dropdown when it's located at the right edge of the screen. The options does not have the proper width. I'm using Foundation 5.0.2. And the dropdown is inside a tabbar

Dropdown

<nav class="tab-bar">
  <section class="left-small">
    <a class="left-off-canvas-toggle"><i class="fa fa-bars"></i></a>
  </section>
  <section class="middle tab-bar-section">
    <h1 id="tabbar-title" class="title">Home</h1>
  </section>
  <section class="right-small phe-mb-tabbar-right-menu">
    <a href="#" data-dropdown="options-menu"><i class="fa fa-th-large"></i></a>
    <ul id="options-menu" class="tiny f-dropdown" data-dropdown-content data-options="right_align:true">
      <li><a href="#">Option 1</a></li>
      <li><a href="#">Option 2</a></li>
      <li><a href="#">Option 3</a></li>
    </ul>
  </section>
</nav>
            

         
Mat Mathews over 5 years ago

Hi, I have the same issue, placing the dropdown inside a cell of a table. The content drop down is positioned and fully visible if near the edge of the browser window. I've tried mucking around with overflow and z-index.

i'm guessing there is some margin threshold or something to trigger the positioning?

Anyone got an idea?

Thx!

Karl Ward over 5 years ago

Try add this:

.options-menu li {
   white-space: nowrap;
}

It should at least stop the text from wrapping to a new line, although it might not solve the padding issue. I would need to see the src ... Try to simply add more margin or padding to the same class as above?

Steven Valladolid about 5 years ago

I have the same issue except the dropdown extends off the screen.

Ernest Surudo about 5 years ago

This is a known bug with Foundation 5. It's a pretty big deal, and honestly I'm very surprised it hasn't been fixed yet. I've decided to stick with Foundation 4 for now, which doesn't have this issue.

See: https://github.com/zurb/foundation/issues/4619

Scott McPherson about 5 years ago

Running into the same problem. Any solution for this yet?

Clay Hymas almost 5 years ago

Looks like this was fixed today. I'm going to update and find out. https://github.com/zurb/foundation/issues/4619

Jesse Matlock almost 5 years ago

I just pulled latest and am still fighting with Dropdown placement.. though now, it seems that ALL the dropdown classes are applied if you do not specify right,left or top ! Bottom, as the default position, is no longer applied!

Ive tried specifying the 'bottom' alignment as well as omitting the daya-options all together:
HTML
<a href="javascript:void(0);" class="playlist-button" data-options="align:bottom" data-dropdown="linked-event-list"><i class="fa fa-link"></i> Linked Events</a>

<a href="javascript:void(0);" class="playlist-button" data-dropdown="linked-event-list"><i class="fa fa-link"></i> Linked Events</a>

Unfortunately, all I get is my dropdown having ALL the classes applied:

class="f-dropdown drop-top drop-right drop-left open"

Which not only ruins the placement of the dropdown itself, but also of the pip.

Here are some screenshots from my inspector, etc.
https://www.dropbox.com/s/6pxyh43t0nd04uk/dropdown-position.png?dl=0
https://www.dropbox.com/s/xlgg7uun8dvo7u2/dropdown-classes.png?dl=0
https://www.dropbox.com/s/j3tyv353j55tzd0/dropdown-inspector.png?dl=0

Any help is greatly appreciated.

Rafi Benkual almost 5 years ago

Looking at the docs now this seems to be working. The content dropdown is recalculating its size and position. Testing on 5.4.6. Can anyone confirm?

Jesse Matlock over 4 years ago

All good.. 5.4.7 resolved the pip (and multiple positioning classes) issue.

Thanks!!