Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

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

  • This topic is empty.
Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #34126
    grimski
    Participant

    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!

    #122920
    Paulie_D
    Member

    Got a link?

    #122922
    grimski
    Participant

    @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! :)

    #122924
    Andy Howells
    Participant

    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.

    #122925
    TylerNYC
    Member

    @grimski

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

    #122929
    Paulie_D
    Member

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

    #122936
    grimski
    Participant

    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.

    #122940
    grimski
    Participant

    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?

    #149623
    tempertemper
    Participant

    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 9 posts - 1 through 9 (of 9 total)
  • The forum ‘CSS’ is closed to new topics and replies.