Grow your CSS skills. Land your dream job.

Problem with Dropdown Menu on Ipad

  • # May 10, 2013 at 11:03 am

    We are having a problem with a drop down menu which is not properly displayed on an Ipad.

    When opening the drop down menu on an Ipad, the drop down menu is not wide enough, so the text within the drop menu is displayed in 2 rows which looks really bad. (looks fine on IE or Chrome)

    We asked our programmers to make the drop down menu wider so text will be displayed in one row. But our Programmers say that Ipad selects the width of the drop down menu automatically and there is nothing they can do about this.

    Is there a way to fix this problem ?

    # May 10, 2013 at 11:18 am

    Hmm…a quick google would seem to indicate that there isn’t.

    # May 10, 2013 at 11:38 am

    Can you tell me what exactly you googled ? Sorry, we are not the real experts -:)

    # May 10, 2013 at 12:35 pm

    I assumed you were referring to the ‘select’ `` type and not a standard HTML/CSS dropdown menu?

    The former are **really** hard to change, the latter…not so much.

    If it’s the latter it should be an matter of a media query or responsive design and I would assume that was a fundamental part of the brief.

    We’d need to see the site to be able to help much further (or have a reduced case in Codepen).

    # May 11, 2013 at 5:59 pm

    Hi Pauli,

    ok, we asked our programmer what type he was using and this is what he responded.

    We are using html select box.

    Any advice you can give ?

    # May 11, 2013 at 6:50 pm

    Nope…Apple are **really** paranoid about how that sort of things renders in iOS Safari and have it locked down pretty tight.

    http://stackoverflow.com/questions/3006647/list-of-known-safari-on-ipad-differences-over-desktop-safari

    I find it odd that the text is so long that it could break the basic functionality like that.

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

You must be logged in to reply to this topic.

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