Have an issue on a checkout page, there is a select for selecting a customers country. Now some of these are very long, for example “The Democratic Republic of the Congo”. And although these on visible on screen, they seem to be ‘pushing out’ my layout. Screenshot below…
_Note: The textfields are set to 100% so thats why they run into the space created by the select options._
Now the select itself is only 50% of its containing div, so that isn’t breaking the layout, it is actually the longer options inside it. If I remove the select completely the page displays correctly and aligns with the other fieldsets below and above it (Not an suitable solution unfortunately!). Also, if I just put a few options in called “One”, “Two”, “Three” etc, the page also displays correctly and the page doesn’t get pushed out – so its definitely the long options.
Why not set a fixed width on the select? Or a max-width on a mobile size media query? Most smart phones will actually not dropdown but use native scrollers, for example, the iPhone anyway, so it may benefit.
First, I added a fixed pixel width onto the select with !important and that seemed to stop the horizontal scroll I was having. But I would prefer a bit more flexibility with a percentage width if possible – so I removed this in search of another way…
Then with the CSS how it was previously, I added box-sizing: border-box; onto the fieldset which _seems_ to of fixed the problem?
Thanks for all your help guys, hopefully this helps someone else in the future!
A bit of a parting shot… on my design the checkboxes/radio buttons are just light shaded grey boxes or circles on the iphone. I take it a border style will add something to this. Can you style the tick or dot for the selected state inside?