CODEWITHSUNDEEP
htmltwitter-bootstrap
sqlcte
sqlcte

Reputation: 425

Displaying Label and Dropdown on the same line

I need to dislpay Label and dropdown on the same line. I'm using bootstrap and my html is like that

<div class="row">
   <div class="col-md-2>
      <label>Users:</label>
      <select class="form-control">
         <option value="">Select User</option>    
         <option *ngFor="let u of UsersList"       [ngValue]="u.UserId">{{u.FullName}}</option>
      </select>
   </div>
</div>

Upvotes: 2

Views: 20006

Answers (3)

rbock
rbock

Reputation: 625

As stated on the documentation page CSS Bootstrap (emphasis mine):

Bootstrap requires a containing element to wrap site contents and house our grid system. You may choose one of two containers to use in your projects.

Use .container for a responsive fixed width container.

Use .container-fluid for a full width container, spanning the entire width of your viewport.

So your html code should be:

    <div class="container">
        <div class="row">
            <div class="col-md-2">
                <label>Users:</label>
                <select class="form-control">
                    <option value="">Select User</option>    
                    <option *ngFor="let u of UsersList" [ngValue]="u.UserId">{{u.FullName}}</option>
                </select>
            </div>
        </div>
</div>

Upvotes: 0

Jalay Oza
Jalay Oza

Reputation: 762

You need to do some changes in your html

Add class form-horizontal to your form and do as following html code

<div class="row">

<form class="form-horizontal">


<div class="form-group">
                <label for="exampleInputuname" class="col-sm-3 control-label">Select User</label>
                <div class="col-sm-9">
                  <div class="input-group">
                    <select class="form-control">
                      <option value="">Select User</option>
                      <option *ngFor="let u of UsersList" [ngValue]="u.UserId">{{u.FullName}}</option>
                    </select>
                    <div class="input-group-addon"><i class="ti-user"></i></div>
                  </div>
                </div>
              </div>
</form>
</div>

Hope this help you

Upvotes: 0

c-bro
c-bro

Reputation: 486

Use the 'for' attribute of the label:

<div class="row">
   <div class="col-md-2>
      <label for="sel-options">Users:</label>
      <select id="sel-options" class="form-control">
         <option value="">Select User</option>    
         <option *ngFor="let u of UsersList"       [ngValue]="u.UserId">{{u.FullName}}</option>
      </select>
   </div>
</div>

Upvotes: 2

Related Questions