Andreas/ngx-admin
1
0
Fork 0
mirror of https://github.com/akveo/ngx-admin.git synced 2025-12-16 15:40:11 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix(buttons): fix flex issue (IE issue)

Browse source
This commit is contained in:
KostyaDanovsky 2017-09-20 13:51:47 +03:00
parent b066920a92
commit 08851fdfed
2 changed files with 41 additions and 46 deletions
Download patch file Download diff file Expand all files Collapse all files

79
src/app/pages/ui-features/buttons/button-groups/button-groups.component.html
View file

@ -30,47 +30,46 @@
</div>
</div>
<div class="example-container toolbars-container">
<div class="row">
<div class="pagination-container col-xxxl-6">
<div class="container-title">Pagination</div>
<div class="btn-group btn-toggle-group btn-outline-toggle-group" data-toggle="buttons"
[(ngModel)]="paginationModel" ngbRadioGroup>
<label class="btn btn-outline-success">
<input type="radio" [value]="1"> 1
</label>
<label class="btn btn-outline-success">
<input type="radio" [value]="2"> 2
</label>
<label class="btn btn-outline-success">
<input type="radio" [value]="3"> 3
</label>
<label class="btn btn-outline-success">
<input type="radio" [value]="4"> 4
</label>
<label class="btn btn-outline-success">
<input type="radio" [value]="5"> 5
</label>
</div>
<div class="pagination-container">
<div class="container-title">Pagination</div>
<div class="btn-group btn-toggle-group btn-outline-toggle-group" data-toggle="buttons"
[(ngModel)]="paginationModel" ngbRadioGroup>
<label class="btn btn-outline-success">
<input type="radio" [value]="1"> 1
</label>
<label class="btn btn-outline-success">
<input type="radio" [value]="2"> 2
</label>
<label class="btn btn-outline-success">
<input type="radio" [value]="3"> 3
</label>
<label class="btn btn-outline-success">
<input type="radio" [value]="4"> 4
</label>
<label class="btn btn-outline-success">
<input type="radio" [value]="5"> 5
</label>
</div>
<div class="icon-toolbar-container col-xxxl-6">
<div class="container-title">Icon Toolbar</div>
<div class="btn-group btn-toggle-group" data-toggle="buttons">
<label class="btn btn-success" [class.active]="iconToolbarModel.one">
<input type="checkbox" [(ngModel)]="iconToolbarModel.one"> 1
</label>
<label class="btn btn-success" [class.active]="iconToolbarModel.two">
<input type="checkbox" [(ngModel)]="iconToolbarModel.two"> 2
</label>
<label class="btn btn-success" [class.active]="iconToolbarModel.three">
<input type="checkbox" [(ngModel)]="iconToolbarModel.three"> 3
</label>
<label class="btn btn-success" [class.active]="iconToolbarModel.four">
<input type="checkbox" [(ngModel)]="iconToolbarModel.four"> 4
</label>
<label class="btn btn-success" [class.active]="iconToolbarModel.five">
<input type="checkbox" [(ngModel)]="iconToolbarModel.five"> 5
</label>
</div>
</div>
<div class="icon-toolbar-container">
<div class="container-title">Icon Toolbar</div>
<div class="btn-group btn-toggle-group" data-toggle="buttons">
<label class="btn btn-success" [class.active]="iconToolbarModel.one">
<input type="checkbox" [(ngModel)]="iconToolbarModel.one"> 1
</label>
<label class="btn btn-success" [class.active]="iconToolbarModel.two">
<input type="checkbox" [(ngModel)]="iconToolbarModel.two"> 2
</label>
<label class="btn btn-success" [class.active]="iconToolbarModel.three">
<input type="checkbox" [(ngModel)]="iconToolbarModel.three"> 3
</label>
<label class="btn btn-success" [class.active]="iconToolbarModel.four">
<input type="checkbox" [(ngModel)]="iconToolbarModel.four"> 4
</label>
<label class="btn btn-success" [class.active]="iconToolbarModel.five">
<input type="checkbox" [(ngModel)]="iconToolbarModel.five"> 5
</label>
</div>
</div>
</div>

8
src/app/pages/ui-features/buttons/button-groups/button-groups.component.scss
View file

@ -6,10 +6,10 @@
.toolbars-container {
display: flex;
flex-direction: column;
}
.pagination-container {
flex: 1;
margin-right: 1rem;
.btn-group > .btn {
@ -25,10 +25,6 @@
}
}
.icon-toolbar-container {
flex: 1;
}
.toggle-types {
.btn-toggle-radio-group {
margin-bottom: 1rem;
@ -43,7 +39,7 @@
}
.example-container:not(:last-child) {
margin-bottom: 2rem;
margin-bottom: 1.5rem;
}
.example-container > div {