bootstrap textbox height issue in safari

Question

I am new to bootstrap. I have prepared one screen which is working fine in all browser except Safari.

In safari because of textbox height all design breaks. Please see image.

Here is my code:

  <div id="drugSection" class="panel panel-default">
            <div class="row">
                <div class="col-md-12">
                    <div class="col-md-4 col-sm-4">
                        <div class="form-group">
                            @Html.Label("Doses")
                            @Html.DropDownList("Doses", new SelectList(listItems), new { @class = "form-control" })
                        </div>
                    </div>
                    <div class="col-md-4 col-sm-4">
                        <div class="form-group">
                            @Html.Label("Type")
                            @Html.DropDownList("Type", new SelectList(listItems), new { @class = "form-control" })
                        </div>
                    </div>
                    <div class="col-md-4 col-sm-4">
                        <div class="form-group">
                            @Html.Label("Route")
                            @Html.DropDownList("Route", new SelectList(listItems), new { @class = "form-control" })
                        </div>
                    </div>
                    <div class="col-md-4 col-sm-4">
                        <div class="form-group">
                            @Html.Label("Frequency")
                            @Html.DropDownList("Frequency", new SelectList(listItems), new { @class = "form-control" })
                        </div>
                    </div>
                    <div class="col-md-4 col-sm-4 ">
                        <div class="form-group">
                            @Html.Label("Days")
                            @Html.TextBox("Days", "", new { @class = "form-control custom-height", @placeholder = "Days" })
                        </div>
                    </div>
                    <div class="col-md-4 col-sm-4">
                        <div class="form-group">
                            @Html.Label("Package Details")
                            @Html.DropDownList("Package Details", new SelectList(listItems), new { @class = "form-control" })
                        </div>
                    </div>

                    <div class="col-md-4 col-sm-4 ">
                        <div class="form-group">
                            @Html.Label("Quantity")
                            @Html.TextBox("Quantity", "0", new { @class = "form-control custom-height", @placeholder = "Quantity" })
                        </div>
                    </div>
                    <div class="col-md-4 col-sm-4">
                        <div class="form-group">
                            @Html.Label("Unit")
                            @Html.DropDownList("Unit", new SelectList(listItems), new { @class = "form-control" })
                        </div>
                    </div>
                    <div class="col-md-4 col-sm-4">
                        <div class="form-group">
                            @Html.Label("Refill")
                            @Html.DropDownList("Refill", new SelectList(listItems), new { @class = "form-control" })
                        </div>
                    </div>
                </div>
            </div> 
             <div class="row nomargin">
                    <div class="col-md-8 noPl">
                        <div class="col-md-4 col-sm-4 ">
                            <div class="form-group">
                                @*<div class="col-md-offset-2 col-md-10">*@
                                <div class="checkbox-inline">
                                    @Html.CheckBox("PRN")
                                    @Html.Label("PRN")
                                </div>
                                @* </div> *@
                            </div>
                        </div>
                        <div class="col-md-4 col-sm-4 mbot10-xs">
                            <div class="form-group">
                                <div class="checkbox-inline">
                                    @Html.CheckBox("DAW/DNS")
                                    @Html.Label("DAW/DNS")
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-12 col-md-8 noPl">
                        @Html.TextBox("rx lbl", "", new { @class = "form-control", @style = "max-width:100%;margin-bottom:13px;", @placeholder = "Additional Sig (will appear on rx label)" })

                    </div>
                </div>

            </div>

How can I fix it in safari. Any help is appreciated.

Share the css as well, or create JSfiddle to preview. additionally check this, if you have the doctype in your page: http://stackoverflow.com/questions/7196398/text-input-rendering-issue-with-twitter-bootstrap — Sanjeev Kumar, Aug 01 '16 at 08:40

score 0 · Answer 1 · answered Aug 01 '16 at 10:08

0

Every textbox and selectbox give equal height. For e.g.

   input [type="text"], select{
      height:50px;
   }

That's just an example. You can change the height to whatever you want.

answered Aug 01 '16 at 10:08

Hilario Goes

433
5
15

bootstrap textbox height issue in safari

1 Answers1