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

Home Forums CSS [Solved] Select list problem in android

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • #150453


    the text is cut off for my select lists when browsing my site on my HTC one smart phone.

    Can anyone please help me to get it displaying properly?

    Image and video hosting by TinyPic

    UPDATE: found out its a padding issue, is it possible to target android browsers using conditional CSS?


    We’d need to see the code…or a live link.

    You should remember that browsers are very picky about the way they display inputs like this and you over-ride any normal characteristics at your peril.


    Many thansk for your reply

     <div class="form-group">
        <div class="row">
          <div class="col-xs-10">
            <select name="your_relationship" id="relationship" title="Your relationship to person being bullied" class="input-lg form-control">
              <option value="">Your relationship to person being bullied</option>
              <option value="1"  class="stripe1">Parent</option>
              <option value="2"  class="stripe2">Carer</option>
              <option value="3"  class="stripe1">Friend</option>
              <option value="4"  class="stripe2">Brother/sister</option>
              <option value="5"  class="stripe1">Grandparent</option>
              <option value="6"  class="stripe2">Other family member</option>
              <option value="7"  class="stripe1">Unrelated by stander</option>
              <option value="8"  class="stripe2">I am the person being bullied</option>
              <option value="9"  class="stripe1">Teacher</option>
              <option value="10"  class="stripe2">School staff</option>
          <div class="col-xs-2"> <a data-container="body" rel="popover" data-placement="left" data-content="We need to know your relationship to the person being bullied" class="left-notice"><span>Help</span></a> </div>



    display: block;
    width: 100%;
    height: 34px;
    padding-top: 6px;
    padding-right: 12px;
    padding-bottom: 6px;
    padding-left: 12px;
    font-size: 14px;
    line-height: 1.42857;
    color: #555555;
    vertical-align: middle;
    background-color: #ffffff;
    border-top-width: 1px;
    border-right-width-value: 1px;
    border-bottom-width: 1px;
    border-left-width-value: 1px;
    border-top-style: solid;
    border-right-style-value: solid;
    border-bottom-style: solid;
    border-left-style-value: solid;
    border-top-color: #cccccc;
    border-right-color-value: #cccccc;
    border-bottom-color: #cccccc;
    border-left-color-value: #cccccc;
    border-image-source: none;
    border-image-slice: 100% 100% 100% 100%;
    border-image-width: 1 1 1 1;
    border-image-outset: 0 0 0 0;
    border-image-repeat: stretch stretch;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
    box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.075) inset;
    transition-property: border-color, box-shadow;
    transition-duration: 0.15s, 0.15s;
    transition-timing-function: ease-in-out, ease-in-out;
    transition-delay: 0s, 0s;
    height: 45px;
    padding-top: 10px;
    padding-right: 16px;
    padding-bottom: 10px;
    padding-left: 16px;
    font-size: 18px;
    line-height: 1.33;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
    border-bottom-left-radius: 6px;


    UPDATE: found out its a padding issue, is it possible to target android browsers using conditional CSS?

    What about the padding?

    I would have thought it’s more likely to be a line-height issue.

    Anyway, it may not be Android…it might be Chrome on Android, or Dolphin, or whatever browser is being used.

    That’s why it’s not usually a good idea to change the standard way inputs are rendered…you get variable results.

    Are you using a framework? There may be some answers in their documentation.


    Thanks for the replies.

Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘CSS’ is closed to new topics and replies.