Displaying HTML elements in same row

user_7915067 0
Viewed 199

I am looking to achieve options as
enter image description here


But with current code, am getting it as below:

enter image description here

How to get options Yes and No next to each other

Below is my code: For HTML

<div class="mycustom-radios">            
            <div class="mycustom-radios__item" *ngFor="let employeeType of employeeTypes">
                <input class="mycustom-radios__input" id="e_employeetype" name="what-type-of-employee" type="radio" [value]="employeeType" [(ngModel)]="selectedemployeeType"/>
                <label class="mycustom-label mycustom-radios__label" for="e_employeeType">
                <p>{{employeeType}}</p>
                </label>
            </div>      
        </div>

For component.ts

selectedemployeeType: string;
employeeTypes: string[] = ['Yes', 'No'];
angular html
4 Answers

@Patty! Try using the display:flex CSS property, like this:

<div style="display:flex">
<div>div block 1</div>
<div>div block 2</div>
</div>

user_142645680

You need to apply the CSS styles like so.

// use this styling
div{
  display:flex;
  align-items:center;
}    
input{
  margin-right:5px;
}
input:last-child{
  margin-right:0px;
}
<div>
     <!-- nest your angular controls here -->
     <input type="checkbox" />
     <input type="checkbox" />
     <input type="checkbox" />
     <input type="checkbox" />
     <input type="checkbox" />
</div>

user_60851930

Change p to span and apply display:inline as in below example. In the example I have added 2 divs to mimic *ngFor="let employeeType of employeeTypes"

.mycustom-radios__item {
  display: inline-flex;
}
<div class="mycustom-radios">
  <div class="mycustom-radios__item" *ngFor="let employeeType of employeeTypes">
    <input class="mycustom-radios__input" id="e_employeetype" name="what-type-of-employee" type="radio" [value]="employeeType" [(ngModel)]="selectedemployeeType" />
    <label class="mycustom-label mycustom-radios__label" for="e_employeeType">
                <span>No</span>
                </label>
  </div>
  <div class="mycustom-radios__item" *ngFor="let employeeType of employeeTypes">
    <input class="mycustom-radios__input" id="e_employeetype" name="what-type-of-employee" type="radio" [value]="employeeType" [(ngModel)]="selectedemployeeType" />
    <label class="mycustom-label mycustom-radios__label" for="e_employeeType">
                <span>Yes</span>
                </label>
  </div>
</div>

user_11883220

This will do the trick:

.mycustom-radios {
    display: flex;
    flex-direction: row;
}

Or:

You can change display of your elements to inline-block like this:

.mycustom-radios__item {
    display: inline-block;
}

If you use the flex display, make sure to add flex-wrap for smaller screens (like phones for instance):

.mycustom-radios {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
user_11068350
Related