bootstrap col-md-12 vs. width 100% behave differently when show/hide div

Question

I am trying to implement a drop down similar to autocomplete. I noticed that it behaves differently when I used col-md-12 vs. width 100%. I have two samples below.

http://codepen.io/safecoder/pen/reQxZz

<div class="result_optins col-md-12">

It uses col-md-12. When I start typing in the input, the text below got pushed down.

http://codepen.io/safecoder/pen/YqRqWm

<div class="result_optins">

.search_cont .result_optins{
width: 100%;
display:none;
}

It uses width: 100%. When I start typing in the input, the options box overlaps the text below.

I could not figure out why it behaves differently. Can anyone shed some light on this?

Also, how can I achieve what it looks like in the second case (overlapping) if I still want to use col-md-12?

Answer 1

Bootstrap's column has float: left, and that's why it looks different.

If you want to keep overlapping, you'll need to override Bootstrap's float: left by adding a helper class of your own, with float: none.

In your custom CSS file you could do something like:

.h-fn {
  float: none !important;
}

and add that class to the proper HTML element:

<div class="result_optins col-md-12 h-fn"> ... </div>

Answer 2

A much cleaner way to position dropdown options is with position: absolute. No need for complex floats or anything else.

$('input').on('keyup', function() {
    $('.result').addClass('result-visible');
});

$(document).on('click', function() {
    $('.result').removeClass('result-visible');  
});

.input-wrapper {
  position: relative;
  display: inline-block;
}

.result {
  position: absolute;
  top: 100%;
  left: 0;
  display: none;
  margin: 0;
  padding: 0;
  background: #eee;
  min-width: 100%;
}

.result li {
  padding: .2rem;
  border-bottom: 1px solid #aaa;
}

.result-visible {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="input-wrapper">
  <input type="text" placeholder="type here">
  <ul class="result">
    <li>Result 1</li>
    <li>Result 2</li>
  </ul>
</div>
<div>Content below input</div>

Answer 3

The bootstrap class col-md-12 also has float: left set which helps in overflowing the child element from the parent. Since your search bar has a fixed height, you'll need to add float-left to .result_optins class and it will behave in the same way.

Here's a pen for better understanding of what's happening.