Twitter Bootstrap Question posted in

How to make button in same line as input box that has dynamically added style – Twitter bootstrap

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:

https://jsfiddle.net/rdawkins/Lh3fqy9w/15/

Tags:

4

Answers


  1. 0

    Yes you are right, the issue is because your autocomplete gets wrapped in a div. So add display:inline-block to that div as well.

    CSS:

    .easy-autocomplete {  
    display:inline-block;    
}

    DEMO

    Login or Signup to reply.
  2. 0

    DEMO

    add display:inline-block to that div

    .easy-autocomplete {
    position: relative;
    display: inline-block; 
}
    Login or Signup to reply.
  3. 0

    Try floating the elements like this?

    <div class="pull-left">
  <input type="text" value="" /> 
  <button class="btn btn-success btn-sm">Search</button>
</div>

    It should work together with the column classes as well 🙂

    Login or Signup to reply.
  4. 0

    EasyComplete only wraps the input element. Try adding the recommended wrapper around both.

    <div class="col-md-6 col-sm-6 col-xs-6">
  <div class="autocomplete-wrap">
    <input id="autocomplete" type="text" value="" /> 
    <button class="btn btn-success btn-sm"> Search</button>
  </div>
</div>

    The extra div is ugly, but in my experience, making changes to the div that defines your columns often results in problems later.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search