Nick Kahn February 2016

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

Answers


Tim Southard February 2016

Add display:inline-block to your divs.


Wilkoklak February 2016

Maybe try placing them into "row" and "col"s? (I haven't checked that code, but you get the idea ;))

<div class="row">
<form class="navbar-form" role="search">
       <div class="col-*-3"><div class="input-group">
          <input type="text" class="form-control" placeholder="Search" name="empsrch" id="empsrch"/></div>
          <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="col-*-3">
       <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> 
</div>
    </form></div>

By "*" I mean md, lg etc. (you know, screen size thingies)


HebleV February 2016

Remove input group for other 2 fields and include all 3 fields in one single- div class="input-group" check this http://codepen.io/anon/pen/YwRNPM

<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 ng-show="selected == 'Employer Search'">
   <input type="text" class="form-control" placeholder="State" name="state" id="state" />

     <input type="text"   class="form-control" placeholder="City" name="city" id="city" />
   </div> 
 </div> 
</form>


jrran90 February 2016

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>

this is my sample output http://goo.gl/PYklyR


lightcast February 2016

Since you are using bootstrap you can do the following:

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-md-12 col-lg-12">
      <input type="text" />
      <input type="text" />
      <input type="text" />
</div>
  </div>
</div>

JS Fiddle https://jsfiddle.net/lightcast/6nwvnspd/

Post Status

Asked in February 2016
Viewed 2,728 times
Voted 14
Answered 5 times

Search




Leave an answer