Menu icon Foundation
Select dropdown in form expanding with text

Hello, been trying to figure out how to stop the drop-down option items in a select box from expanding past the columns width. Tried wrapping text with no luck. Please see image provided. Any advice would be greatly appreciated, Thanks in advance.

Expanding sample

Hello, been trying to figure out how to stop the drop-down option items in a select box from expanding past the columns width. Tried wrapping text with no luck. Please see image provided. Any advice would be greatly appreciated, Thanks in advance.

Expanding sample

This post has been closed. No new replies can be added.

Rafi Benkual over 4 years ago

Typically, I wrap the dropdown content in a row and columns to get things lined up. If you use the mega class it fills the column container perfectly - http://codepen.io/rafibomb/pen/LVYppJ

Also we wrote about doing this with a mega menu here: http://zurb.com/university/lessons/nav-components-part-1-design-advanced-navigation-with-mega-menus

Also: if you are on version 5.4.7 or later the dropdown should be full width on mobile.

Trevor Lavigne over 4 years ago

Thanks for the advice!