I am using twitter bootstrap as my framework. I have an input box which is an autocomplete box that uses a jQuery plugin. I am trying to get a button next to it (inline-block) but it doesn’t seem to work and is displayed below the autocomplete box.
I noticed that when the autocomplete plugin kicks in, it wraps the input box in a div so maybe that is the reason I can’t get them in the same line.
HTML
<div class="col-md-6 col-sm-6 col-xs-6">
<input id="autocomplete" type="text" value="" />
<button class="btn btn-success btn-sm" style="display:inline-block"> Search</button>
</div>
I have created a jsfiddle to reproduce my issue:
4
Answers
Yes you are right, the issue is because your autocomplete gets wrapped in a
div
. So adddisplay:inline-block
to thatdiv
as well.CSS:
DEMO
DEMO
add
display:inline-block
to that divTry floating the elements like this?
It should work together with the column classes as well 🙂
EasyComplete only wraps the input element. Try adding the recommended wrapper around both.
The extra
div
is ugly, but in my experience, making changes to thediv
that defines your columns often results in problems later.