CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
neubert
neubert

Reputation: 16802

twitter bootstrap select covers up some of it's label

My code:

<div class="form-inline">
    <div class="form-group">
        <label class="control-label col-sm-2" for="demo">Options: </label>
        <div class="col-sm-8">
            <select class="form-control" name="demo">
                <option value="all">View All</option>
            </select>
        </div>
    </div>
</div>

A demo:

http://jsfiddle.net/Wy22s/408/

The problem is that the drop down menu partially covers the "Options:" label. What's the best way to fix this?

Upvotes: 0

Views: 115

Answers (2)

ntalekt
ntalekt

Reputation: 852

<form class="form-horizontal">

Expand the result to see how it renders: http://jsfiddle.net/Wy22s/412/

HTML:

<form class="form-horizontal">
<fieldset>

<div class="form-group">
  <label class="col-md-4 control-label" for="Options">Options</label>
  <div class="col-md-4">
    <select id="Options" name="Options" class="form-control">
      <option value="1">Option one</option>
      <option value="2">Option two</option>
    </select>
  </div>
</div>

<div class="form-group">
  <label class="col-md-4 control-label" for="Options 2">Options 2</label>
  <div class="col-md-4">
    <select id="Options 2" name="Options 2" class="form-control">
      <option value="1">Option one</option>
      <option value="2">Option two</option>
    </select>
  </div>
</div>

</fieldset>
</form>

enter image description here

Upvotes: 0

Tim Lewis
Tim Lewis

Reputation: 29297

I would do it like so using Bootstrap 3's grid system:

<form method="POST">
  <div class="container-fluid">
    <div class="row">
      <div class="col-xs-2">
        <label>Option:</label>
      </div>
      <div class="col-xs-10">
        <select class="form-control input-sm">
          <option value=""></option>
          <option value="1">One</option>
          <option value="2">Two</option>
        </select>
      </div>
    </div>
  </div>
</form>

And if you want to add more items inline, just change the col-xs-* to something else. For example, 2 elements would look like so:

<div class="col-xs-2">
  <label>Option One:</label>
</div>
<div class="col-xs-4">
  <select class="form-control input-sm">
    <option value=""></option>
    <option value="1">One</option>
    <option value="2">Two</option>
  </select>
</div>
<div class="col-xs-2">
  <label>Option Two:</label>
</div>
<div class="col-xs-4">
  <select class="form-control input-sm">
    <option value=""></option>
    <option value="1">One</option>
    <option value="2">Two</option>
  </select>
</div>

As long as your col-xs-* classes add up to 12 on a single row, everything will display properly on the same row. Note, you can close a row's <div> tag early, ie it doesn't have to equal 12, but it can't exceed 12.

Hope that helps!

And see this Bootply Example to see a live demo:

Bootply

Upvotes: 2

Related Questions