bootstrap `input-group` fixed size

1
votes

I need to make the bootstrap input-group with fixed size, here is the JS Fiddle link https://jsfiddle.net/ncxge6md/1/ , basically I need to resize the input field when page resizes. 

<ul class="nav navbar-nav navbar-left">

      <li
      <form class="navbar-form" >
       From Date:<br>    
        <div class="form-group">
         <div class='input-group date' id='datetimepickerFrom'>
           <input id = "date_idFrom" type='text' class="form-control" placeholder="From Date" />
             <span class="input-group-addon">
              <span class="glyphicon glyphicon-calendar"></span>
             </span>
            </div>
        </div>
        </form>
  </li>

     </br> 
     <br>


        <li
        <form class="navbar-form" role="search">
        City:<br>
        <div class="input-group">
            <input  autocomplete="off" id = "city_id"  type="text" class="form-control" placeholder="City" name="q">
         </div>
        </form>
       </li> 

       </li> 

    </ul>
2
htmlcsstwitter-bootstrap

2 Answers

1
votes

If you are using bootstrap , you can use grids. like col-xs-{num} col-sm-{num} col-md-{num} col-lg-{num}.(in bootstrap 3)

DEMO HERE

1
votes

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/css/bootstrap-datetimepicker.min.css" rel="stylesheet"/>
<ul class="nav navbar-nav navbar-left">

    <li>
        <form class="navbar-form">
            <div class="col-md-12">From Date:<br>
                <div class="form-group">
                    <div class='input-group date' id='datetimepickerFrom'>
                        <input id = "date_idFrom" type='text' class="form-control" placeholder="From Date" />
                        <span class="input-group-addon">
                            <span class="glyphicon glyphicon-calendar"></span>
                        </span>
                    </div>
                </div>
            </div>    
 	    </form>
    </li></br> <br>
    <li>
        <form class="navbar-form" role="search">
            <div class="col-md-12">City:<br>
                <div class="input-group">
                    <input autocomplete="off" id = "city_id"  type="text" class="form-control" placeholder="City" name="q">
                </div>
            </div>
        </form>
    </li>

</ul>

Try this.

This may help you.

Thanks.