Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

bootstrap input group with text select and button

Tags:

I would like to have this using bootstrap css:

bootstrap input group

I've written a jsfiddle to make my tests : http://jsfiddle.net/xr4uofje/

<div class="container">
  <div class="col-lg-6">
    <div class="input-group">
      <input class="input-group-addon" size="8" type="text">
      <span class="input-group-btn">
        <select class="form-control"></select>
        <button type="button" class="btn btn-default">Get</button>
      </span>
    </div>
  </div>
</div>
like image 601
Alexandre Mélard Avatar asked Apr 08 '15 09:04

Alexandre Mélard


2 Answers

you can put this type of elements

LIVE DEMO

HTML

<div class="container">
    <div class="col-lg-6">
        <div class="input-group my-group"> 
            <input type="text" class="form-control" name="snpid" placeholder="Test"/>
            <select id="lunch" class="selectpicker form-control" data-live-search="true" title="Please select a lunch ...">
                <option>Hot Dog, Fries and a Soda</option>
                <option>Burger, Shake and a Smile</option>
                <option>Sugar, Spice and all things nice</option>
                <option>Baby Back Ribs</option>
                <option>A really really long option made to illustrate an issue with the live search in an inline form</option>
            </select> 
            <span class="input-group-btn">
                <button class="btn btn-default my-group-button" type="submit">GO!</button>
            </span>
        </div>
    </div>
<div>

CSS

.my-group .form-control{
    width:50%;
}

JQUERY

if ( $.browser.webkit ) {
    $(".my-group-button").css("height","+=1px");
}
like image 88
Mansukh Khandhar Avatar answered Oct 29 '22 00:10

Mansukh Khandhar


as document said.

Avoid using <select> elements here as they cannot be fully styled in WebKit browsers.

so we should use bootstrap's dropdowns with javascript code instead.

like image 39
Zero Zhang Avatar answered Oct 28 '22 22:10

Zero Zhang