[Solved] Select list problem in android

[matthisco]

Hello,

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?

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

[Paulie_D]

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.

[matthisco]

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>
        </select>
      </div>
      <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>
    </div>
  </div>

CSS

.form-control

{
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;
}
.input-lg
{
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;
}

[Paulie_D]

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.

[matthisco]

Thanks for the replies.

[Author]

Posts