Angular CSS HTML inline label and input field. how to float label to the left and input field to the right

user_1250264 0
Viewed 653

I am working on an angular form where I have many label input field combination. I got the label and input file styled with inline block so they are rendering on the same row. I want to float or pull the label to the far left while the input field control is float or pull to the far right. I tried a few CSS changes but no success so far, any help is appreciated.

.input-w label, .input-w select {
    float:none; 
    display: inline-block;
    vertical-align: middle;

}

.label {
    padding: 0.21em 0.4em 0.2em;
    box-shadow: none;
}
<form [formGroup]="myForm">
       <div class="row">
         <div class="col">
      
           <div class="input-w label">
             <label for="dropdown1" class="form-inline">Options: </label>
             <select formControlName="dropdown1" class="form-control form-line">
               <option *ngFor="let option of Options" 
                              [ngValue]="option.value">
                              {{option.display}}
               </option>
             </select>
               
          </div>
        </div>
      </div>
    </form>

angular css html
2 Answers

Lets change the css property like below so that you can get the desired output :

Solution 1

.input-w label, .input-w select {
    display: inline-block;
    vertical-align: middle;
}

.input-w select{
   float: right;
}

.label {
    padding: 0.21em 0.4em 0.2em;
    box-shadow: none;
}

adding float right will help you moving the label to far right.

Solution 2 :

Remove all css added to label & select tags and add this css to class input-w . Simple and effective

.input-w {
    display: grid;
    grid-template-columns: 1fr 1fr;    
}
user_99028750

Just need to rearrange your css classes a bit. Move the .label class off the container div and put it on the label, there no need for the container too have the float. Also can add a seperate class to put float right on select. I have included a sample jsfiddle.

<form [formGroup]="myForm">
       <div class="row">
         <div class="col">
      
           <div class="input-w">
             <label for="dropdown1" class="form-inline label">Options: </label>
             <select formControlName="dropdown1" class="form-control form-line select-input">
               <option *ngFor="let option of Options" 
                              [ngValue]="option.value">
                              {{option.display}}
               </option>
             </select>
               
          </div>
        </div>
      </div>
    </form>

.input-w label, .input-w select {
    vertical-align: middle;
    display: block;
}

.label {
    padding: 0.21em 0.4em 0.2em;
    box-shadow: none;
    float: left;
}

.select-input{
  float: right;
}

https://jsfiddle.net/e0wzpsb3/

user_148913470
Related