Andreas/ngx-admin
1
0
Fork 0
mirror of https://github.com/akveo/ngx-admin.git synced 2025-12-17 07:50:12 +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> </div>
<div class="example-container toolbars-container"> <div class="example-container toolbars-container">
<div class="row"> <div class="pagination-container">
<div class="pagination-container col-xxxl-6"> <div class="container-title">Pagination</div>
<div class="container-title">Pagination</div> <div class="btn-group btn-toggle-group btn-outline-toggle-group" data-toggle="buttons"
<div class="btn-group btn-toggle-group btn-outline-toggle-group" data-toggle="buttons" [(ngModel)]="paginationModel" ngbRadioGroup>
[(ngModel)]="paginationModel" ngbRadioGroup> <label class="btn btn-outline-success">
<label class="btn btn-outline-success"> <input type="radio" [value]="1"> 1
<input type="radio" [value]="1"> 1 </label>
</label> <label class="btn btn-outline-success">
<label class="btn btn-outline-success"> <input type="radio" [value]="2"> 2
<input type="radio" [value]="2"> 2 </label>
</label> <label class="btn btn-outline-success">
<label class="btn btn-outline-success"> <input type="radio" [value]="3"> 3
<input type="radio" [value]="3"> 3 </label>
</label> <label class="btn btn-outline-success">
<label class="btn btn-outline-success"> <input type="radio" [value]="4"> 4
<input type="radio" [value]="4"> 4 </label>
</label> <label class="btn btn-outline-success">
<label class="btn btn-outline-success"> <input type="radio" [value]="5"> 5
<input type="radio" [value]="5"> 5 </label>
</label>
</div>
</div> </div>
<div class="icon-toolbar-container col-xxxl-6"> </div>
<div class="container-title">Icon Toolbar</div>
<div class="btn-group btn-toggle-group" data-toggle="buttons"> <div class="icon-toolbar-container">
<label class="btn btn-success" [class.active]="iconToolbarModel.one"> <div class="container-title">Icon Toolbar</div>
<input type="checkbox" [(ngModel)]="iconToolbarModel.one"> 1 <div class="btn-group btn-toggle-group" data-toggle="buttons">
</label> <label class="btn btn-success" [class.active]="iconToolbarModel.one">
<label class="btn btn-success" [class.active]="iconToolbarModel.two"> <input type="checkbox" [(ngModel)]="iconToolbarModel.one"> 1
<input type="checkbox" [(ngModel)]="iconToolbarModel.two"> 2 </label>
</label> <label class="btn btn-success" [class.active]="iconToolbarModel.two">
<label class="btn btn-success" [class.active]="iconToolbarModel.three"> <input type="checkbox" [(ngModel)]="iconToolbarModel.two"> 2
<input type="checkbox" [(ngModel)]="iconToolbarModel.three"> 3 </label>
</label> <label class="btn btn-success" [class.active]="iconToolbarModel.three">
<label class="btn btn-success" [class.active]="iconToolbarModel.four"> <input type="checkbox" [(ngModel)]="iconToolbarModel.three"> 3
<input type="checkbox" [(ngModel)]="iconToolbarModel.four"> 4 </label>
</label> <label class="btn btn-success" [class.active]="iconToolbarModel.four">
<label class="btn btn-success" [class.active]="iconToolbarModel.five"> <input type="checkbox" [(ngModel)]="iconToolbarModel.four"> 4
<input type="checkbox" [(ngModel)]="iconToolbarModel.five"> 5 </label>
</label> <label class="btn btn-success" [class.active]="iconToolbarModel.five">
</div> <input type="checkbox" [(ngModel)]="iconToolbarModel.five"> 5
</label>
</div> </div>
</div> </div>
</div> </div>

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

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