Question

0

89

Views

Displaying HTML elements in same row

I am looking to achieve options as

But with current code, am getting it as below:

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'];

over 4 years ago · Santiago Trujillo

3 answers

Answer question

0

Answer question

Find remote jobs

Answer 1 · 2022-06-07T21:12:59.626Z

@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>

Answer 2 · 2022-06-07T21:12:59.634Z

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>

Answer 3 · 2022-06-07T21:12:59.641Z

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>

0

89

Displaying HTML elements in same row

3 answers

0

0

0

Find remote jobs

Andres GPT