Bootstrap 3 daterangepicker not taking 100% width

Question

I'm using custom datepicker (https://github.com/eternicode/bootstrap-datepicker) inside my form (http://jsfiddle.net/Misiu/a3NV4/22/)

I would like that daterangepicker to take 100% width like all other form elements, but can't get that to work.

My only workaround was to use datepicker css for bootstrap 2. I should use these rules:

@import url('http://getbootstrap.com/dist/css/bootstrap.css');
@import url('http://eternicode.github.io/bootstrap-datepicker/bootstrap-datepicker/css/datepicker3.css');

but instead I'm using (there is missing 3 at end of second line):

@import url('http://getbootstrap.com/dist/css/bootstrap.css');
@import url('http://eternicode.github.io/bootstrap-datepicker/bootstrap-datepicker/css/datepicker.css');

this is what I get when I use bootstrap 3 css:

also on small screen inputs in picker don't have equal width:

I would like to switch entirely to bootstrap 3, but this tiny but is stopping me from doing so.

Answer 1

The problem was datepicker custom .input-group-addon css.

.input-daterange .input-group-addon {
    width: auto; /*remove this line*/
    min-width: 16px;
    padding: 4px 5px;
    font-weight: normal;
    line-height: 1.428571429;
    text-align: center;
    text-shadow: 0 1px 0 #fff;
    vertical-align: middle;
    background-color: #eeeeee;
    border: solid #cccccc;
    border-width: 1px 0;
    margin-left: -5px;
    margin-right: -5px;
}

after removing width: auto both bugs were fixed, please see: http://jsfiddle.net/Misiu/a3NV4/24/

Answer 2

You could add the col-xs-12 class to your input-group. This will force the group to always be as wide as it's parent container.

<div class="form-group">
    <label class="col-sm-3 control-label">Dates range</label>
    <div class="col-sm-9">
        <div class="input-daterange" id="datepicker">
             <div class="input-group col-xs-12">
                 <input type="text" class="input-small form-control" name="start" />
                 <span class="input-group-addon">to</span>
                 <input type="text" class="input-small form-control" name="end" />
             </div>
        </div>
     </div>
</div>

Updated Fiddle