how to remove the space between the dropdown for firefox browser - Twitter bootstrap

syafiqah
July 10, 2017
145 views
0 votes
2 Answers

i have tested in chrome all okay and no space. But when i open in firefox, the position of input field is change and has space between the dropdown.

From firefox browser

From chrome browser

$(document).ready(function() {
        $(".js-example-basic-single").select2();
    });

.dob_m{
    height: 34px;!important;
    width: 110px;!important;
}
.dob_d{
    height:34px;!important;
    width: 65px;!important;

}
.dob_y{
    height:34px;!important;
    width: 85px;!important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css">
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<form class="well form-horizontal" action=" " method="post" 
    id="user_edit">
   
   <div class="form-group">
            <div class="col-md-8 inputGroupContainer">
                <div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>

                    <select name="dob_day" id ="dob_day" class="dob_d js-example-basic-single ">
                    
                    </select>
                    <select name="dob_month" id ="dob_month" class="dob_m js-example-basic-single ">
                        
                    </select>
                    <select name="dob_year" id ="dob_year"  class=" js-example-basic-single dob_y">
                       
                    </select> <input type="hidden" name="dob" value="1"  />
                </div>
            </div>
        </div>
 </form>
 
 <script>
        $(document).ready(function () {
            var month = [], day = [], year = [];

            for (var i = 1; i <= 12; i++) {
                month.push(i);
            }
            for (var i = 1; i <= 31; i++) {
                day.push(i);
            }
            for (var i = 1900; i <= (new Date().getFullYear()); i++) {
                year.push(i);
            }
            $.each(day, function (index, d) {
                $("#dob_day").append("<option>" + d + "</option>");
            });
            $.each(month, function (index, m) {
                $("#dob_month").append("<option>" + m + "</option>");
            });
            $.each(year, function (index, y) {
                $("#dob_year").append("<option>" + y + "</option>");
            });
        });
    </script>

How to fix the position of field to be same for all browser

Tags: css html

Answers

This is due to line breaks between selects. So to avoid breaking the indentation, I added HTML commentsbetweenselects`.

Or, you can put all selects on the same line of code.

$(document).ready(function() {
        $(".js-example-basic-single").select2();
    });

.dob_m{
    height: 34px;!important;
    width: 110px;!important;
}
.dob_d{
    height:34px;!important;
    width: 65px;!important;

}
.dob_y{
    height:34px;!important;
    width: 85px;!important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css">
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<form class="well form-horizontal" action=" " method="post" 
    id="user_edit">
   
   <div class="form-group">
            <div class="col-md-8 inputGroupContainer">
                <div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>

                    <select name="dob_day" id ="dob_day" class="dob_d js-example-basic-single ">
                    
                    </select><!--
                    --><select name="dob_month" id ="dob_month" class="dob_m js-example-basic-single ">
                        
                    </select><!--
                    --><select name="dob_year" id ="dob_year"  class=" js-example-basic-single dob_y">
                       
                    </select> <input type="hidden" name="dob" value="1"  />
                </div>
            </div>
        </div>
 </form>
 
 <script>
        $(document).ready(function () {
            var month = [], day = [], year = [];

            for (var i = 1; i <= 12; i++) {
                month.push(i);
            }
            for (var i = 1; i <= 31; i++) {
                day.push(i);
            }
            for (var i = 1900; i <= (new Date().getFullYear()); i++) {
                year.push(i);
            }
            $.each(day, function (index, d) {
                $("#dob_day").append("<option>" + d + "</option>");
            });
            $.each(month, function (index, m) {
                $("#dob_month").append("<option>" + m + "</option>");
            });
            $.each(year, function (index, y) {
                $("#dob_year").append("<option>" + y + "</option>");
            });
        });
    </script>

Simply fix this issue, add float:left to .select2-container Or you need to remove the whitespace between inline-block elements , check this link https://davidwalsh.name/remove-whitespace-inline-block

.select2-container {
   float: left !important;
}

$(document).ready(function() {
        $(".js-example-basic-single").select2();
    });

.dob_m{
    height: 34px;!important;
    width: 110px;!important;
}
.dob_d{
    height:34px;!important;
    width: 65px;!important;

}
.dob_y{
    height:34px;!important;
    width: 85px;!important;
}	
.select2-container {
	float: left !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<form class="well form-horizontal" action=" " method="post" 
id="user_edit">
   
   <div class="form-group">
        <div class="col-md-8 inputGroupContainer">
            <div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>

                <select name="dob_day" id ="dob_day" class="dob_d js-example-basic-single ">
                
                </select><!--
                --><select name="dob_month" id ="dob_month" class="dob_m js-example-basic-single ">
                    
                </select><!--
                --><select name="dob_year" id ="dob_year"  class=" js-example-basic-single dob_y">
                   
                </select> <input type="hidden" name="dob" value="1"  />
            </div>
        </div>
    </div>
 </form>
 
 <script>
    $(document).ready(function () {
        var month = [], day = [], year = [];

        for (var i = 1; i <= 12; i++) {
            month.push(i);
        }
        for (var i = 1; i <= 31; i++) {
            day.push(i);
        }
        for (var i = 1900; i <= (new Date().getFullYear()); i++) {
            year.push(i);
        }
        $.each(day, function (index, d) {
            $("#dob_day").append("<option>" + d + "</option>");
        });
        $.each(month, function (index, m) {
            $("#dob_month").append("<option>" + m + "</option>");
        });
        $.each(year, function (index, y) {
            $("#dob_year").append("<option>" + y + "</option>");
        });
    });
</script>

Please signup or login to give your own answer.

Click here to cancel reply.

how to remove the space between the dropdown for firefox browser – Twitter bootstrap

Answers