CODEWITHSUNDEEP
javascripthtmltwitter-bootstraptwitter-bootstrap-3
junkfood
junkfood

Reputation: 41

Dropdown inside search text field on bootstrap

I try to create a search box with a dropdown inside the search text field

For now this is my result:

http://www.bootply.com/46drKn8dRs#

But i prefer the dropdown is on the right, any help?

Upvotes: 1

Views: 1272

Answers (2)

Ahs N
Ahs N

Reputation: 8366

This is how I fixed it:

.btn.dropdown-toggle{
  border-radius:0;
}

Here is your updated Bootply

I moved the element and added the above CSS code.

Upvotes: 1

ingemi
ingemi

Reputation: 186

if you want to move de dropdown to the right, you can just move all the tag after the search text field like this: 

<div class="row">
 <div class="col-md-6">
    <div class="form-horizontal">
      <div class="input-group">              
        <input id="txtkey" type="text" class="form-control" placeholder="Enter here" aria-describedby="ddlsearch">
        <div class="ddl-select input-group-btn">
          <select id="ddlsearch" class="selectpicker form-control" data-style="btn-primary">
            <option value="france">France</option>
            <option value="austria">Austraia</option>
            <option value="usa">usa</option>
          </select>
        </div>
        <span class="input-group-btn">
          <button id="btn-search" class="btn btn-info" type="button"><i class="fa fa-search fa-fw"></i></button>
        </span>
      </div>
    </div>
  </div>
</div>

Upvotes: 0

Related Questions