CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3
Skylar Saveland
Skylar Saveland

Reputation: 11464

Absolute position element in bootstrap3 - force width to be the same as container

tl;dr - how do I get the results div to be the same width as the input here: http://plnkr.co/edit/44hVxWVZzYY32Fx6dqpp?p=preview

Given the following html:

<div class="container-fluid">
  <div class="row">
    <div class="col-md-8">
      <input style="width:100%" />
      <div class="results">
        <ul id="search-list">
          <li>Result1</li>
          <li class="selected">Result2</li>
          <li>Result3</li>
        </ul>
      </div>
    </div>
  </div>
</div>

With CSS:

ul {
  padding: 0;
  margin: 0;
  list-style-type: none;
}

.results {
  position: absolute;
  z-index: 1;
  background-color: rgba(0, 255, 255, 0.9);
  width: 100%;
}

#search-list li {
  font-size: 130%;
  padding-left: 15px;
}

The results div is wider than the input:

enter image description here

I would like the results to be the exact width as the input. I can achieve this by removing the absolute positioning from the .results element. But, I need the results to appear atop any subsequent content. Thanks for any suggestions.

Upvotes: 1

Views: 350

Answers (2)

Skylar Saveland
Skylar Saveland

Reputation: 11464

One, somewhat hacky seeming way would be to move the background to the li and then use padding on the container. Then, have to be more specific with the .selected rule.

http://plnkr.co/edit/alLfxA?p=preview

ul {
  padding: 0;
  margin: 0;
  list-style-type: none;
}

.results {
  position: absolute;
  z-index: 1;
  width: 100%;
  padding-right: 30px;
}

#search-list li {
  font-size: 130%;
  padding-left: 15px;
  background-color: rgba(0, 255, 255, 0.9);

}

#search-list li.selected {
  background: yellow;
}

Upvotes: 0

Christina
Christina

Reputation: 34652

It's very simple:

.results {
  position: absolute;
  z-index: 1;
  left:15px;
  right:15px;
}

Get to know the Bootstrap grid and you'll understand that there's 15px on either side of every col-*- class on the vanilla download.

Upvotes: 1

Related Questions