htmltwitter-bootstrap-3

Conditional showing html block - display in one row

UPDATE based on @HebleV:

enter image description here

I'm having a little issue with formating and trying to show html block in one row

Here is my html code

<form class="navbar-form" role="search">

   <div class="input-group">
      <input type="text" class="form-control" placeholder="Search" name="empsrch" id="empsrch"/>
      <div class="input-group-btn">
         <button class="btn btn-default" type="submit" ng-click="open"><i class="glyphicon glyphicon-search"></i></button>
      </div>
   </div>

   <div ng-show="selected == 'Employer Search'">
      <div class="input-group">
         <input type="text" class="form-control" placeholder="State" name="state" id="state" />
      </div>
      <div class="input-group">
         <input type="text"   class="form-control" placeholder="City" name="city" id="city" />
      </div> 
   </div> 
</form>

screenshot:

enter image description here

Solution

  • since you're using bootstrap,change your code to this..

    <form action="" class="form-inline">
    <div class="form-group">
        <div class="input-group">
              <input type="text" class="form-control" placeholder="Search" name="empsrch" id="empsrch"/>
              <div class="input-group-btn">
                 <button class="btn btn-default" type="submit" ng-click="open"><i class="glyphicon glyphicon-search"></i></button>
              </div>
          </div>            
    </div>      

    <div class="form-group" ng-show="selected == 'Employer Search'">
          <div class="input-group">
             <input type="text" class="form-control" placeholder="State" name="state" id="state" />
          </div>
          <div class="input-group">
             <input type="text"   class="form-control" placeholder="City" name="city" id="city" />
          </div> 

    </div>
</form>