CODEWITHSUNDEEP
iphonecssmobileresponsive-designcheckout
user1406440
user1406440

Reputation: 1665

OPTION element inside SELECT too long & breaking mobile layout

I have a responsive site design, most of which works just fine.

On the checkout page though I have a Select element for selected a country. Some of the options are very long, the "Congo, the Democratic Republic of the" for example. This pushes the layout out to the right, breaking the layout and making the layout scroll horizontal - which is horrible ;)

If I remove the select completely, the layout displays fine. And if I remove all the options and put short tests ones in their place it also works fine. So I'm pretty sure its the long Option's which is the issue. The Select itself is only 50% wide, so that doesn't run off the screen - its the 'invisible' option elements.

Here is a temp link: http://moymadethis.com/oca/test.html

Works fine on desktop, issue is on iphone mobile (safari, chrome and opera).

Thanks, hope someone can shed some light on a solution for this? Steve

Upvotes: 3

Views: 3395

Answers (4)

Mirek Długosz
Mirek Długosz

Reputation: 4285

On iPhone with iOS 15.4.1, I also needed to specify overflow-x:

#myselect {
    width: 50%;
    overflow-x: hidden;
}

Selected option value never overflows outside of <select> boundary box, but browser behaved as if it did overflow - parent element width clearly changed based on option that is currently selected. With above styling, this no longer happens.

Upvotes: 1

NoWomenNoCry
NoWomenNoCry

Reputation: 157

try using max-width on select element eg #myselect {max-width:95%;}

Upvotes: 0

Keith Pincombe
Keith Pincombe

Reputation: 61

I've recently had exactly the same problem on a project i'm working on. I found the solution was to use !important on the select width which in my case was 100%. This allows the solution to work perfectly on mobile and desktop.

Upvotes: 0

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201886

Normally it suffices to set width on the select element itself (as opposite to setting width on its parent – the inner element will by default overflow if needed), e.g.

 select { width: 6em; }

When the menu is opened (when the element is focused), the options will then appear in a width required by their context, but this will appear in a “layer” on top of the page content, so it should not disturb layout.

If problems remain, please post minimal HTML and CSS code to reproduce the problem and identify the platform(s) and browser(s) tested.

Upvotes: 1

Related Questions