Menu icon Foundation
Left align dropdowns

Hi,

I was wondering if anyone knew how i could go about left aligning the bottom dropdowns in foundation? I cant use the normal align:left data option as this either disappears off the left side of the grid or blocks other dropdows. Ideally i would like to be able to change the CSS for the normal bottom dropdown so that the dropdown box drops on the left rather than the right.

Thanks!

Dropdown example

dropdown

Hi,

I was wondering if anyone knew how i could go about left aligning the bottom dropdowns in foundation? I cant use the normal align:left data option as this either disappears off the left side of the grid or blocks other dropdows. Ideally i would like to be able to change the CSS for the normal bottom dropdown so that the dropdown box drops on the left rather than the right.

Thanks!

Dropdown example
Rafi Benkual over 4 years ago

Hey Ronan,
We can help you with this. It would really help us to see an example or a link, or share the code so we can understand what you're trying to do. Here is a codepen with Foundation loaded: http://codepen.io/rafibomb/pen/zxegLJ

Bob Sawyer over 4 years ago

It appears to me that the bottom drop-down IS left-aligned. See link below.

http://codepen.io/bobsawyer/pen/jEdgKw

Unless I'm misunderstanding what you're asking for...

Ronan over 4 years ago

Hi Bob,

I have attached a screentshot to my original post to clarify what i mean. I have also modified your codepen slightly. When the dropdown button is smaller my issue is clearer i think:

http://codepen.io/anon/pen/xbBwLd

When you click the dropdown button the panel appears below the dropdown button with the panels left border aligned with the left border of the dropwdown button. I would like it that the panels right border be aligned with the right border of the dropwdown button so that any overflow for the panel would be on the left rather than the right.

Thanks!

Bob Sawyer over 4 years ago

Ah. OK, I'm stumped. Hopefully someone else can jump in and provide a solution to this one!

Ronan over 4 years ago

Anyone else have any idea's about this? I have managed to modify the CSS for a bottom dropdown that is left aligned but on small screen devices Foundations viewport detection kicks in and messes with my custom CSS.

Rafi Benkual over 4 years ago