-1

Using the <label class="btn btn-secondary"><input type="radio" value="active"> Active</label> breaks the entire tool bar in Bootstrap 4 - Alpha 6

See Bootply

This is the visual of good and bad code

This is the visual of good and bad code

<div class="btn-toolbar" role="toolbar" >

    <div class="btn-group btn-group-sm" role="group">
        <button type="button" class="btn btn-secondary">Select All</button>
    </div>
    <div [(ngModel)]="toolbar.active" ngbRadioGroup name="radioBasic" class="btn-group btn-group-sm" (ngModelChange)="onChanges('activeChanged')">
        <label class="btn btn-secondary">
            <input type="radio" value="active"> Active
        </label>
        <label class="btn btn-secondary">
            <input type="radio" value="inactive"> Inactive
        </label>
        <label class="btn btn-secondary">
            <input type="radio" value="all"> All
        </label>
    </div>
    <div class="input-group input-group-sm" style="width: 250px;">
        <input id="search" [(ngModel)]="toolbar.search" (ngModelChange)="onChanges($event)" type="text" class="form-control" placeholder="Search for...">
    </div>

    <div class="btn-group btn-group-sm float-xs-right" role="group">
        <button type="button" class="btn btn-info" (click)="onChanges('refresh')">Refresh</button>
        <button type="button" class="btn btn-primary" [routerLink]="['new']">New</button>
        <button type="button" class="btn btn-secondary">Debug</button>
    </div>

</div>

<br/>

This altered code breaks entire formatting

This altered code breaks entire formatting

David Cruwys
  • 6,262
  • 12
  • 45
  • 91

1 Answers1

0

This seems to work pretty well..

<div class="btn-toolbar" role="toolbar">
    <div class="btn-group btn-group-sm" role="group">
        <button type="button" class="btn btn-secondary">Select All</button>
    </div>
    <div class="btn-group btn-group-sm" (ngmodelchange)="onChanges('activeChanged')">
        <button class="btn btn-secondary">
            <input type="radio" value="active"> Active
        </button>
        <button class="btn btn-secondary">
            <input type="radio" value="inactive"> Inactive
        </button >
        <button  class="btn btn-secondary">
            <input type="radio" value="all"> All
        </button>
    </div>
    <div class="input-group-sm" style="width: 250px;">
        <input id="search" [(ngmodel)]="toolbar.search" (ngmodelchange)="onChanges($event)" type="text" class="form-control" placeholder="Search for...">
    </div>
    <div class="btn-group btn-group-sm ml-auto" role="group">
        <button type="button" class="btn btn-info" (click)="onRefresh()">Refresh</button>
        <button type="button" class="btn btn-primary" [routerlink]="['new']">New</button>
        <button type="button" class="btn btn-secondary">Debug</button>
    </div>
</div>

http://www.codeply.com/go/SkZIflTsOZ

Note: I'm not sure that the inputs inside buttons are suppored in the btn-group. Also note the docs say..

"Feel free to mix input groups with button groups in your toolbars. Similar to the example above, you’ll likely need some utilities though to space things properly."

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
  • Whilst this seems to work visually, it is not the way the bootstrap ng controls work and they seem to need to work with – David Cruwys Feb 16 '17 at 01:10
  • Yeah, inputs require labels so perhaps the toolbar is not the best place for them. As mentioned in the docs you'll need to space things properlely. – Carol Skelly Feb 16 '17 at 11:28
  • That's unfortunate because this all works fine in Bootstrap 4 - Alpha 4 and of course bootstrap 3 – David Cruwys Feb 17 '17 at 02:14