Search code examples
jquerycsstwitter-bootstrapbootstrap-select

CSS - My issues with width and alignment of Bootstrap select jQuery plugin

This might be a trivial practice but I don't seem to be able to handle it.

I am using Twitter Bootstrap 3.3.6 along with jQuery 1.12.0, and I'm also using the "bootstrap-select" jQuery plugin:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/css/bootstrap-select.min.css">

  <!-- Latest compiled and minified JavaScript -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/bootstrap-select.min.js"></script>
</head>

<body>
  <br>
  <div>
    <div class="panel panel-primary">
      <div class="panel-heading ">
        <center>
          <select class="selectpicker" id="headingSelect">
            <option>Item 1</option>
            <option selected>Item 2</option>
            <option>Item 3</option>
          </select>
        </center>
      </div>
      <div class="panel-body">
        <center>
          <div class="form-inline">
            <div class="form-group">
              <label class="control-label" for="age">Age:</label>
              <input type="text" class="form-control" id="age" style="width:45px;">
            </div>
            <div class="form-group">
              <label class="control-label" for="Month">Month:</label>
              <select id="Month" class="selectpicker">
                <option>Month1</option>
                <option selected>Month2</option>
                <option>Month3</option>
              </select>
            </div>
            <div class="form-group">
              <label for="Year">Year:</label>
              <input type="text" class="form-control" id="Year" style="width:60px;">
            </div>
          </div>
        </center>
      </div>
    </div>
  </div>
  </div>
</body>

</html>

I have two problems here:

  1. I want the select options to be center-aligned but I can't!

  2. I cannot reduce the size of "Month" input either!

Please help! Thanks!

Solution

  • The CSS for bootstrap-select looks pretty heavy-handed, so you have to override with a pretty high specificity...for that reason, the easiest thing to do is to add an ID to the div wrapping the month select so that you can target it specifically. (assuming you don't want the size of the item select to be the same as your custom size on the month div).

    if you're good with adding the ID, here's the additional CSS you need:

    .dropdown-menu>li>a {
  text-align:center;
}
#month-select .bootstrap-select.btn-group {width:auto;}

#month-select.bootstrap-select.btn-group .dropdown-toggle,
#month-select.bootstrap-select.btn-group .dropdown-menu {
  max-width:100px; /* or whatever width you want the select and dropdown to be */
  min-width:100px; /* or whatever width you want the select and dropdown to be */
}    

/* if you want to center the label in the dropdown button, not just the options
 in the list, uncomment this:

.bootstrap-select.btn-group .dropdown-toggle .filter-option {
  text-align:center;
  padding-left:12px
}
*/

    Codepen: http://codepen.io/anon/pen/KzOpGJ