I am faced with two scenarios:
The first scenario involves using a FORM GROUP with Angular 5 and Angular Material Design.
Below is the code for handling multiple checkboxes:
<div *ngSwitchCase="'checkboxField'" class="checkbox-field">
<div *ngIf="!field?.properties?.hideTitle">{{field?.properties.title}}</div>
<div class="checkbox-label" *ngFor="let element of field?.elements">
<mat-checkbox
[value]="element?.properties.value"
[disabled]="field?.properties.disabled"
[checked]="isItemChecked(element?.properties.value)"
(change)="onCheckboxChange(element?.properties.value);
notifyFormOfChange($event);">
{{element?.properties.title}}
</mat-checkbox>
</div>
</div>
The display can be in two formats:
1) HORIZONTAL 2) VERTICAL
The vertical layout only occurs when I have multiple checkboxes or radio buttons within a form-group (which also needs fixing). Without a form-group, the checkboxes or radio buttons are displayed in a line without space between them.
Vertical alignment of checkboxes is required when this property is set to true:
field.properties.stackVertically = true
This can only be achieved through CSS.
Here's the CSS style for the form-group:
.row[_ngcontent-c30] {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px;
}
There is no specific styling for the horizontal layout.
Enabling the vertical option is conditional on the following:
field.properties.stackVertically = true
Refer to the image links below for visual examples:
https://i.stack.imgur.com/umwvj.png https://i.stack.imgur.com/kPA7m.png
UPDATE BASED ON A SUCCESSFUL SOLUTION!!!
Check out the success image and view the integrated solution from above with proper placement.
It turns out that the solution needed to be applied on the second line instead of where I initially thought. Some trial and error led to success!
https://i.stack.imgur.com/TauHQ.png
Below is the updated code with KimCindy's helpful answer included. Many thanks!
<div *ngSwitchCase="'checkboxField'" class="checkbox-field">
***<div class="cb-wrapper" [ngClass]="{'cb-vertical': field?.properties?.stackVertically }">***
<div *ngIf="!field?.properties?.hideTitle">{{field?.properties.title}}</div>
<div class="checkbox-label" *ngFor="let element of field?.elements">
<mat-checkbox
[value]="element?.properties.value"
[disabled]="field?.properties.disabled"
[checked]="isItemChecked(element?.properties.value)"
(change)="onCheckboxChange(element?.properties.value);
notifyFormOfChange($event);">
{{element?.properties.title}}
</mat-checkbox>
</div>
***</div>***
</div><!--checkbox-->