Grow your CSS skills. Land your dream job.

[Solved] Long option element in Select breaks (pushes out) layout on mobile

  • # January 31, 2013 at 11:09 am

    Hi peeps,

    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…

    ![Long option in Select element pushing layout, out.](http://i50.tinypic.com/2dj7yb8.png)

    _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.

    Any ideas? A bit stuck now!

    # January 31, 2013 at 11:22 am

    Is it inline? That could be your problem, try setting it to `display: inline-block;`.

    # January 31, 2013 at 12:02 pm

    Got a link?

    # January 31, 2013 at 12:12 pm

    @howlermiller It is, I’ve tried block and inline-block on the select and it doesn’t seem to change anything :/

    @Paulie_D I’ve uploaded the template to here: http://moymadethis.co.uk/temp/8-checkout.html

    It displays fine in a resized browser, just mobile where it seems to bork.

    Thanks for taking a look! :)

    # January 31, 2013 at 12:17 pm

    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.

    # January 31, 2013 at 12:20 pm

    @grimski

    I checked on my phone and it seems to work just fine.

    # January 31, 2013 at 12:23 pm

    Can you not limit the width of the ‘option’ or do something with ‘word-wrap’?

    # January 31, 2013 at 1:56 pm

    Thanks for the replies…

    @AndyHowells I have a width on the select and it still does it. I tried a width on the option but it didn’t seem to do anything. I’ll give it another whirl.

    @TylerNYC Really? I’m looking on an iphone in Safari and I can scroll horizontally on that page – what phone are you using?

    @Paulie_D I’ve tried setting a width but it just seemed to ignore it. Not tried word-wrap. I’ll try setting that to ‘break-word’ with a width on the option and see if it does anything.

    # January 31, 2013 at 2:25 pm

    Bizarrely or _not_… I think I’ve fixed this.

    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?

    # September 10, 2013 at 6:13 am

    For responsive sites, select {width: 100% !important;} works nicely too– you don’t necessarily need a fixed pixel width. The!important seems to be the fix.

    (At least it does on iOS 6.1.4 and above– I haven’t had a chance to test this comprehensively yet)

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".