Home

Fix angular checkBox

enter image description here

This UI is produced by following code ….means checkboxes are not aligned properly . They are being displayed on extreme left and extreme right .

<div class="sample">         <div align="left" class="user-modified-rule">             <mat-checkbox (change)="changeSelectionTo()" [(ngModel)]="isChangeRule"></mat-checkbox>             <rule> </rule>        </div>         <div class="ruleSpearator"> OR</div>         <div align="right" class="production-stage-rule">             <mat-checkbox (change)="changeSelectionTo()" [(ngModel)]="isOriginalRule"></mat-checkbox>             <rule> </rule>          </div> </div>

and i want the UI as shows in images below I need to align the checkbox along with <rule> as in code enter image description here

if i change code

<mat-checkbox></mat-checkbox> <rule></rule>

to

<mat-checkbox>    <rule></rule> </mat-checkbox>```  then entire rule becomes clickable..means any where click on rule , does the checkbox check and uncheck , which i do not want to
Asked on July 16, 2020 in AngularJS,   CSS.
Add Comment
Cancel
1 Answer(s)

You can use angular flex layout

import { FlexLayoutModule } from ‘@angular/flex-layout’;

<div fxLayout="row" fxLayoutGap="20px">     <div fxFlex="50px">             <mat-checkbox></mat-checkbox>     </div>     <div fxFlex>         <rule></rule>     </div> </div>
Cancel
Answered on July 16, 2020.
Add Comment
Cancel

Your Answer

By posting your answer, you agree to the privacy policy and terms of service.