CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Viktor Mellgren
Viktor Mellgren

Reputation: 4506

Bootstrap <select> width, content too wide when resizing window

How can i make the dropdown the size to fit the content (in my case it happens when shrinking the browser to less than some certain size, then content start to dissapear? I preferably do not want any custom css, anything built in to bootstrap to support this?

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<form class="form-horizontal" role="form" enctype="multipart/form-data" id="inputForm" name="inputForm" novalidate>
<div class="well">
<div class="form-group">
    <label class="col-xs-3 control-label"><strong>4.</strong>&nbsp;Select thing</label>
    <div class="col-xs-2">
        <select class="form-control">
            <option>Short
            </option>
            <option>Medium lenght
            </option>
            <option>Much much much longer text not fitting when resizing
            </option>
        </select>
    </div>
</div>
</div>
</form>

Upvotes: 25

Views: 155007

Answers (5)

Ajowi
Ajowi

Reputation: 505

This might appear crude but it works. Just target the select with an html style with desired size for maximum allowed width. This generally should be able to show the first element like "Filter By Customer". The rest now leave to the master (aka Bootstrap) to handle. style="max-width:200px;":

<select name="xxx_id" id="xxx_id" class="form-select" style="max-width:200px;">
<!-- the option values -->
</select>

Upvotes: 0

pherris
pherris

Reputation: 17703

You might consider using bootstrap's dropdown widget which will allow wrapping http://jsfiddle.net/g4s59a9a/:

<div class="dropdown">
  <button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown trigger
    <span class="caret"></span>
  </button>
    
  <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
    <li role="presentation" class="dropdown">
      <a role="menuitem" tabindex="-1" href="#">
      Much much much longer text not fitting when resizing
      </a>
    </li>
    <li role="presentation" class="dropdown">
      <a role="menuitem" tabindex="-1" href="#">
        Smaller text
      </a>
    </li>
  </ul>
</div>

Upvotes: 1

MR.Code
MR.Code

Reputation: 79

New answer

Bootstrap v5

You can put your select element in a container :

<div class="container w-25">
  <select class="form-select  h-100 w-100" aria-label="">
    <option>Images</option>
  </select>
</div>

Upvotes: 7

xandermonkey
xandermonkey

Reputation: 4412

Old question, new answer. You can set the class to w-auto in bootstrap 4.

Upvotes: 30

Ted
Ted

Reputation: 14927

Option 1: You can add width:auto to the select, although then it will always size to fit the longest content, and ignore your col class. See the snippet:

 <link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<form class="form-horizontal" role="form" enctype="multipart/form-data" id="inputForm" name="inputForm" novalidate>
<div class="well">
<div class="form-group">
    <label class="col-xs-3 control-label"><strong>4.</strong>&nbsp;Select thing</label>
    <div class="col-xs-2">
        <select class="form-control" style="width:auto;">
            <option>Short
            </option>
            <option>Medium lenght
            </option>
            <option>Much much much longer text not fitting when resizing
            </option>
        </select>
    </div>
</div>
</div>
</form>

Option 2 would be to use an inline form, see this bootply for a functioning example

Upvotes: 37

Related Questions