CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3
sirtate
sirtate

Reputation: 23

Radio btn-group inside input-group-addon

I would like to put a (2 button) radio btn-group inside of an input-group-addon. The trouble I'm having there is that the buttons do not stay on one line.

The common patterns to keep elements on the same line did not work for me.

Do you know how I could fix this? Thx

Here's the jsfiddle: http://jsfiddle.net/DTcHh/144/

<div id="filter_criteria_date">
<div class="input-group" style='margin-top:15px'> <span class="input-group-addon">
    <input type="checkbox">
    <div class="btn-group" data-toggle="buttons-radio">
      <button type="button" class="btn btn-xs btn-primary">And</button>
      <button type="button" class="btn btn-xs btn-primary">Or</button>
    </div>
    </span>

    <input type="text" class="form-control filter_text" placeholder="Filter">
</div>

Upvotes: 1

Views: 1493

Answers (2)

Sender
Sender

Reputation: 6858

   .input-group-addon { width:auto; }

Working Demo http://jsfiddle.net/DTcHh/148/

Upvotes: 0

Ruddy
Ruddy

Reputation: 9923

They do not stay on one line due to no width being set. Set a width for the parent of the buttons and they will fit.

.btn-group { 
    width: 100px;
}

DEMO HERE

Upvotes: 1

Related Questions