When placing Angular powered Bootstrap radio buttons as per the example, the buttons look ok. But if the element with the btn-group-toggle class isn't the immediate parent, the buttons suddenly display the radio button nipple, as shown in the picture below. How can I layout non-mammalian radio buttons in nested elements?

Radio buttons

The html template:

<table class="table">
  <tr class="btn-group btn-group-toggle" ngbRadioGroup>
    <th>Numbers</th>
    <th *ngFor="let month of [1,2,3,4]">
      <label ngbButtonLabel class="btn btn-primary">
        <input ngbButton type="radio" [value]="month" />{{month}}
      </label>
    </th>
  </tr>
</table>

<div class="btn-group btn-group-toggle" ngbRadioGroup>
  <label ngbButtonLabel class="btn btn-primary" *ngFor="let month of [1,2,3,4]">
    <input ngbButton type="radio" [value]="month" />{{month}}
  </label>
</div>

0 Answers