Reputation: 727
Here is my code that will render an input field on screen:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
....
<div class="form-group ">
<label class="col-xs-8 col-sm-4 col-md-5 col-lg-2 control-label" id="categoryLabel">Request *</label>
<div class=" col-xs-12 col-sm-6 col-md-6 col-lg-6">
<select id="category" name="" class="form-control">
//options
</select>
</div>
</div>
This looks perfect in a PC browser but after a client's feedback, i noticed that Firefox on android doesnt render it properly:
the class form-control has the following css:
.form-control {
display: block;
width: 100%;
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.428571429;
color: #555;
vertical-align: middle;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
-webkit-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}
The rest of the classes are all bootstrap v3.0.0 classes.
Any ideas on how i can make the firefox browser render like the chrome browser?
Thanks
Upvotes: 1
Views: 551
Reputation: 6490
Try changing grid for label.
<label class="col-xs-8
- change to <label class="col-xs-12
Upvotes: 1