Menu icon Foundation
Dropdown data-options="align:top" on small screens

Hello,

I'm new here, thanks to Foundation, I like it.

Did you try Dropdown data-options="align:top" on small screens ?

For every data options "align:...." the dropdown real direction is only "bottom"

Try with the demo page:
http://foundation.zurb.com/docs/components/dropdown.html
Section: Directions -> Top Left Down Right
and resize your browser to small screen like 320x480, and you see it.
(tested with last version of Chrome and Firefox Win7)

Is it normal or is it a bug ?

dropdownoptionaligntopmobilesmallscreens

Hello,

I'm new here, thanks to Foundation, I like it.

Did you try Dropdown data-options="align:top" on small screens ?

For every data options "align:...." the dropdown real direction is only "bottom"

Try with the demo page:
http://foundation.zurb.com/docs/components/dropdown.html
Section: Directions -> Top Left Down Right
and resize your browser to small screen like 320x480, and you see it.
(tested with last version of Chrome and Firefox Win7)

Is it normal or is it a bug ?

Shawn Sears about 5 years ago

Having the same issue here. The direction works on medium-up but on small screens everything goes to align:bottom.

Is there a bug in the JS?

Chris Wolmarans about 5 years ago

I have the same problem, on mobile my drop 'up' becomes a drop down - inline styles change to default when inspecting in browser.... it seems there's a number of issues around the dropdown alignment, but haven't come across any issues regarding mobile screens.

Any help would be great.

Lyn about 5 years ago

Hey there people,

The actual Javascript code is meant to behave like that, making dropdowns go down on small screen.
You can resolve this by adding this bit of code at the end of your page :

Foundation.libs.dropdown.css = function (dropdown, target) {
   var left_offset = Math.max((target.width() - dropdown.width()) / 2, 8);
   this.clear_idx();
   var settings = target.data(this.attr_name(true) + '-init') || this.settings;
   this.style(dropdown, target, settings); 
   return dropdown; 
}

Kind regards,

Lyn.

jmarceli over 4 years ago

For Foundation 5.5.1 the solution is quite simple. If you don't want special behavior on mobile devices place this code after your foundation files (but before foundation JS initialization):

 (function() {
  Foundation.libs.dropdown['small'] = function() {
    return false;
  };

}).call(this);