From fdd170d836ac5b952892ac36b2b674c36cc4ed31 Mon Sep 17 00:00:00 2001
From: jojohoch <joachim.hoch@iqb.hu-berlin.de>
Date: Wed, 13 Oct 2021 13:26:38 +0200
Subject: [PATCH] Break labels of checkboxes and radio buttons
---
.../common/element-components/checkbox.component.ts | 3 ++-
.../element-components/radio-button-group.component.ts | 10 ++++++++--
2 files changed, 10 insertions(+), 3 deletions(-)
diff --git a/projects/common/element-components/checkbox.component.ts b/projects/common/element-components/checkbox.component.ts
index aac74faab..3f131d5a9 100644
--- a/projects/common/element-components/checkbox.component.ts
+++ b/projects/common/element-components/checkbox.component.ts
@@ -29,7 +29,8 @@ import { FormElementComponent } from '../form-element-component.directive';
{{elementFormControl.errors | errorTransform: elementModel}}
</mat-error>
</div>
- `
+ `,
+ styles: ['::ng-deep .mat-checkbox-layout {white-space: normal !important}']
})
export class CheckboxComponent extends FormElementComponent {
@Output() onFocusin = new EventEmitter();
diff --git a/projects/common/element-components/radio-button-group.component.ts b/projects/common/element-components/radio-button-group.component.ts
index 950566e2f..cac2dd77f 100644
--- a/projects/common/element-components/radio-button-group.component.ts
+++ b/projects/common/element-components/radio-button-group.component.ts
@@ -15,7 +15,9 @@ import { FormElementComponent } from '../form-element-component.directive';
[style.font-weight]="elementModel.bold ? 'bold' : ''"
[style.font-style]="elementModel.italic ? 'italic' : ''"
[style.text-decoration]="elementModel.underline ? 'underline' : ''">
- <label [innerHTML]="elementModel.label" id="radio-group-label"></label>
+ <label [innerHTML]="elementModel.label"
+ class="white-space-break"
+ id="radio-group-label"></label>
<mat-radio-group aria-labelledby="radio-group-label"
(focusin)="onFocusin.emit()"
[style.margin-bottom.px]="25"
@@ -33,7 +35,11 @@ import { FormElementComponent } from '../form-element-component.directive';
</mat-error>
</mat-radio-group>
</div>
- `
+ `,
+ styles: [
+ '::ng-deep .mat-radio-label {white-space: normal !important}',
+ '.white-space-break {white-space: normal}'
+ ]
})
export class RadioButtonGroupComponent extends FormElementComponent {
@Output() onFocusin = new EventEmitter();
--
GitLab