MOBILE-4470 feedback: Fix text wrap on ion-item

main
Pau Ferrer Ocaña 2024-05-10 14:36:23 +02:00
parent 7fc7aa78d6
commit 552a6dcf94
2 changed files with 15 additions and 18 deletions

View File

@ -69,7 +69,7 @@
<ion-radio-group *ngIf="item.templateName === 'multichoice-r'" [(ngModel)]="item.value" [required]="item.required"
name="{{item.typ}}_{{item.id}}">
<ion-item *ngFor="let option of item.choices" class="ion-text-wrap">
<ion-item *ngFor="let option of item.choices" class="ion-text-wrap" lines="none">
<ion-radio [value]="option.value">
<core-format-text [component]="component" [componentId]="cmId" [text]="option.label"
contextLevel="module" [contextInstanceId]="cmId" [wsNotFiltered]="true" [courseId]="courseId" />
@ -80,7 +80,7 @@
<ng-container *ngIf="item.templateName === 'multichoice-c'">
<ion-item *ngFor="let option of item.choices">
<ion-checkbox [required]="item.required" name="{{item.typ}}_{{item.id}}" [(ngModel)]="option.checked"
value="option.value">
value="option.value" lines="none">
<core-format-text [component]="component" [componentId]="cmId" [text]="option.label"
contextLevel="module" [contextInstanceId]="cmId" [wsNotFiltered]="true" [courseId]="courseId" />
</ion-checkbox>
@ -156,7 +156,7 @@
<ng-template #label let-item="item">
<p *ngIf="item.name" [core-mark-required]="item.required" [slot]="item.slottedLabel ? 'label' : undefined">
<p class="ion-text-wrap" *ngIf="item.name" [core-mark-required]="item.required" [slot]="item.slottedLabel ? 'label' : undefined">
<span *ngIf="feedback!.autonumbering && item.itemnumber">{{item.itemnumber}}. </span>
<core-format-text [component]="component" [componentId]="cmId" [text]="item.name" contextLevel="module" [contextInstanceId]="cmId"
[courseId]="courseId" [wsNotFiltered]="true" />

View File

@ -190,10 +190,12 @@ ion-item .in-item {
// Correctly inherit ion-text-wrap onto labels.
.item > ion-label,
.fake-ion-item,
.item.ion-text-wrap > ion-checkbox::part(label),
ion-checkbox.ion-text-wrap::part(label)
.item.ion-text-wrap ion-toggle::part(label),
ion-toggle.ion-text-wrap::part(label) {
.item > ion-checkbox::part(label),
ion-checkbox::part(label),
.item ion-toggle::part(label),
ion-toggle::part(label),
.item > ion-input > label,
ion-input > label {
core-format-text,
core-format-text > *:not(pre) {
white-space: nowrap;
@ -207,7 +209,12 @@ ion-item > .in-item,
.fake-ion-item.ion-text-wrap,
.item.ion-text-wrap > ion-checkbox::part(label),
ion-checkbox.ion-text-wrap::part(label),
ion-toggle.ion-text-wrap::part(label) {
ion-toggle.ion-text-wrap::part(label),
.item.ion-text-wrap > ion-input > label,
ion-input.ion-text-wrap > label {
white-space: normal;
overflow: inherit;
core-format-text,
core-format-text > *:not(pre) {
white-space: normal;
@ -215,16 +222,6 @@ ion-toggle.ion-text-wrap::part(label) {
}
}
.item.ion-text-wrap > ion-label,
.item.ion-text-wrap ion-checkbox::part(label),
ion-checkbox.ion-text-wrap::part(label),
.item.ion-text-wrap ion-radio::part(label),
ion-radio.ion-text-wrap::part(label),
.item.ion-text-wrap ion-toggle::part(label),
ion-toggle.ion-text-wrap::part(label) {
white-space: normal !important;
}
ion-item .core-input-errors-wrapper {
width: 100%;
}