Bootstrap and Bootstrap-Select - Fit Select and other elements to div width, 100% width/height

Question

I have a mixture of problems that I am running into.

1) I am using Bootstrap-Select to get a modern select box with search capabilities, but no matter what I try, I cannot seem to get the select to fill the col-span.

2) I have split the row into 2 columns: 2 (Select) and 10 (Images/Map), but unless I change the the widths from 100% to less, they are overlapping and are being placed on top of each other, instead of left-right.

3) Each image (will be replaced by a map) is set to 50% height and 100% width, but still I see the scrollbar for the browser, and its not a small scroll space either. I want to show the map to full 50% height (each, so 100% total) without the scrollbar. I have a feeling the navbar's height needs to be taken into consideration?

Please use the attached jsFiddle for convenience! Borders are added for column visibility only and can be removed.

HTML

<div class="container" style="border: 1px solid red;">
  <div class="row">
    <div class="col-md-2" style="border: 1px solid blue;">
      <div class="form-horizontal">
        <select class="selectpicker col-sm-12" data-live-search="true" title="Routes">
          <option>1 Route A - WEST</option>
          <option>2 Route B - SOUTH</option>
          <option>2 Route B - NORTH</option>
          <option>3 Very Long Route Name C - SOUTH</option>
          <option>3 Very Long Route Name C - NORTH</option>
          <option>4 Route D - EAST</option>
          <option>4 Route D - WEST</option>
          <option>5 An Extremely Long Route Name E - SOUTH</option>
          <option>5 An Extremely Long Route Name E - NORTH</option>
        </select>
      </div>
      <div class="col-md-10 canvas" style="border: 1px solid lime;">
        <div>
          <img src="http://designreviver.com/wp-content/uploads/2014/11/410316.jpg" style="width:100%; height:50%;">
        </div>
        <div>
          <img src="http://designreviver.com/wp-content/uploads/2014/11/410316.jpg" style="width:100%; height:50%;">
        </div>
      </div>
    </div>
  </div>
</div>

CSS

html, body, .container, .row, .canvas {
  height: 100%;
}

.canvas {
  width: 100%;
  height: 100%;
}

.selectpicker {
  padding-left:5px;
  padding-right:5px;
}

.navbar {
  margin-bottom: 0 !important;
}

JSFiddle DEMO

score 6 · Answer 1 · answered Feb 05 '16 at 15:25

When using bootstrap-select it's good practice to use the data-width="100%" to cause the select to fill the space of it's parent i.e. bootstrap column. You can also add this option via javascript when you initialize it. You can read more about that and other options here: https://silviomoreto.github.io/bootstrap-select/options/#core-options

When using either .container or .container-fluid make sure you keep the classes in order: .container .row .col-x-x. Mixing in extra divs that might become the parents of elements you're trying to keep a specific size, might cause problems.

There's a great bootstrap class for images .img-responsive. I would suggest using this for your images. You can read more about that here: http://getbootstrap.com/css/#images.

Here's an updated fiddle https://jsfiddle.net/mrLsveLf/3/

HTML

<nav class="navbar navbar-inverse navbar-static-top">
  <div class="container">
    <div class="navbar-header">
      <a class="navbar-brand" href="">Brand</a>
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>


    <div class="navbar-collapse collapse" id="navbar">
      <ul class="nav navbar-nav navbar-right">
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Sign in <b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li>Hey!</li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

<div class="container">
  <div class="row">
      <div class="col-xs-4">
         <select class="selectpicker" data-live-search="true" title="Routes" data-width="css-width">
            <option>1 Route A - WEST</option>
            <option>2 Route B - SOUTH</option>
            <option>2 Route B - NORTH</option>
            <option>3 Very Long Route Name C - SOUTH</option>
            <option>3 Very Long Route Name C - NORTH</option>
            <option>4 Route D - EAST</option>
            <option>4 Route D - WEST</option>
            <option>5 An Extremely Long Route Name E - SOUTH</option>
            <option>5 An Extremely Long Route Name E - NORTH</option>
          </select>
      </div>
    <div class="col-xs-8">
      <img class="img-responsive" src="http://designreviver.com/wp-content/uploads/2014/11/410316.jpg" style="width:100%;height:50%;">
      <img class="img-responsive" src="http://designreviver.com/wp-content/uploads/2014/11/410316.jpg" style="width:100%;height:50%;">
     </div>
</div>
</div>

Thanks for the input. If you make the jsfiddle larger, the scrollbar appears again. I am trying to make it so that no matter how large the screen size is, the images to fit without scrollbar. — Ali, Feb 07 '16 at 17:31
Not sure I get what you mean, could you be more specific? Enlarging the screen would take away a scroll bar not add it. — James, Feb 16 '16 at 23:01
It is because the images get a lot bigger as you enlarge the screen: [JSFiddle Image](http://s10.postimg.org/vwspysj49/Untitled.png) — Ali, Feb 17 '16 at 14:14

Bootstrap and Bootstrap-Select - Fit Select and other elements to div width, 100% width/height

1 Answers1

Linked