Menu icon Foundation
Foundation 5 dropdown align:left doesn't work in small screens

Here is the screenshot 

http://screencast.com/t/pdKqTS7wK

I have a 500x400 iframe that hosts my page with a few Foundation dropdown controls, I found in this size no matter how I specify "align:xxx" value in the code, Foundation always renders the dropdown layer as align:bottom which is undesirable. I need "align:xxx" to work no matter what the containing page size is. How do I do that? Hacks or workarounds can do too.

I tried to increase my iframe to 1000x400 and the dropdown renders normally. 

 

Foundation-5alignsmall-screendropdown

Here is the screenshot 

http://screencast.com/t/pdKqTS7wK

I have a 500x400 iframe that hosts my page with a few Foundation dropdown controls, I found in this size no matter how I specify "align:xxx" value in the code, Foundation always renders the dropdown layer as align:bottom which is undesirable. I need "align:xxx" to work no matter what the containing page size is. How do I do that? Hacks or workarounds can do too.

I tried to increase my iframe to 1000x400 and the dropdown renders normally. 

 

Rafi Benkual about 3 years ago

I think the default is to go 100% width and align bottom on small because there is usually not enough room to go left or right. Is there a reason you need it to align left on a smaller screen? Have you tried using tooltip?

Shawn Xu about 3 years ago

The reason is since it's an embedded iframe and there is no extra space below the buttons. Letting the dropdown to align to the bottom isn't really an option for me. The content in the dropdown is a menu list so strictly speaking the use case is not tooltip. Is there a way I could work around this? How Foundation 5 determines whether current container is a small screen, does it look at the window or the containing layer?

Thank you.