Menu icon Foundation
Foundation 6x: control dropdown panel width?

In Foundation 5.x, we could control the width of dropdown using tiny, small, medium, large, and mega CSS classes. (see "Advanced" section at http://foundation.zurb.com/sites/docs/v/5.5.3/components/dropdown.html). These do not work for me in Foundation 6.x. Dropdown panes are always using 100% width.

Is there another way to control the width?

Thank you.

Sample:

<div data-toggle="foo-desc">
<img src="{{root}}assets/img/team/foo-150.jpg" class="thumbnail" alt="foo"/><h5>Foo</h5>
<div id="foo-desc" class="dropdown-pane medium" data-dropdown data-hover="true">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p></div>
</div>
</div>

foundation 6dropdown

In Foundation 5.x, we could control the width of dropdown using tiny, small, medium, large, and mega CSS classes. (see "Advanced" section at http://foundation.zurb.com/sites/docs/v/5.5.3/components/dropdown.html). These do not work for me in Foundation 6.x. Dropdown panes are always using 100% width.

Is there another way to control the width?

Thank you.

Sample:

<div data-toggle="foo-desc">
<img src="{{root}}assets/img/team/foo-150.jpg" class="thumbnail" alt="foo"/><h5>Foo</h5>
<div id="foo-desc" class="dropdown-pane medium" data-dropdown data-hover="true">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p></div>
</div>
</div>
Markus Lind almost 4 years ago

the tiny small and large classes are there for dropdown-panes try something like

<div class="small dropdown-pane">Winke Winke aus Deutschland</div>

Hope this helps.

cheers

E. Smythe almost 4 years ago

Thanks for the reply. small and tiny classes aren't working because some JS in foundation is applying this inline style:

top: 250px; left: -93px; width: 1414px; height: auto;

As you know inline styles take precedence over classes.

Any other ideas?

thank you!

E. Smythe almost 4 years ago

If it helps... I'm using the dropdown pane inside a blockgrid http://foundation.zurb.com/sites/docs/grid.html

E. Smythe almost 4 years ago

Still no answer?

PJLDesign over 3 years ago

Having the same problem. Dropdown is opening to full width of the page via the js. So annoying! What's going on Zurb?

Markus Lind over 3 years ago

hey, sorry that it took so long, please show me your code i´ll try to help you guys... 

 

cheers

PJLDesign over 3 years ago

decided to use a modal instead... thanks for your prompt reply

 

anyway over 3 years ago

Same here... the dropdown-pane opens to the full with, if the content is longer than the screen height. Fiddling around for 2 hours now, no chance to control that.

Edit: This seems to be solved with 6.2.1. Works fine now... thanks!

Artur Jaszczyk over 3 years ago

Have the same problem

react code

<div className="top-bar-left">

          <ul className="dropdown menu" data-dropdown-menu>

            <li>

              <IndexLink to="/" activeClassName="active" data-toggle="example-dropdown-1" activeStyle={{fontWeight: 'bold'}}>Test</IndexLink>

              <div className="dropdown-pane" id="example-dropdown-1" data-dropdown data-hover="true" data-hover-pane="true">

                <table>

                  <tbody>

                    <tr>

                      <td>

                        <div>Test

                          <ul className="menu vertical">

                          <li><a href="#">Test</a></li>

                          <li><a href="#">Test</a></li>

                          </ul>

                        </div>

                      </td>

                      <td>

                        <table>

                          <tbody>

                            <tr> <td>

                              <div>Test

                                <ul className="menu vertical">

                                <li><a href="#">Test........................................</a></li>

                                </ul>

                              </div>

                            </td> </tr>

                            <tr> <td>

                              <div>Test

                                <ul className="menu vertical">

                                <li><a href="#">Test</a></li>

                                </ul>

                              </div>

                            </td> </tr>

                          </tbody>

                        </table>

                      </td>

                    </tr>

                  </tbody>

                </table>

              </div>

            </li>

          </ul>

        </div>

 

Gregor Agnes almost 3 years ago

for mega (100% width bottom) I use:

 

.dropdown-pane {
left: 0 !important;
right: 0 !important;
width: auto !important;
}