I'm having troubles modifying the style of the checkbox label. I read the docs and how to use styleClass properties and I'm still not able to make any change. I'm not using :host /deep/
selector because I'm not using the styleUrl of the @Component, instead one loaded and adapted for Firefox.
html:
<p-checkbox styleClass="chBoxOne" labelStyleClass="lblChBoxOne" [(ngModel)]="allowParticipation"
binary="true"
label="This very very long sentence needs to be wrapped to make it fit"
(click)="onClickAllowParticipation()"></p-checkbox>
css attempts:
/*labelStyleClass + Label element*/
.lblChBoxOne.ui-chkbox-label{
word-wrap:break-word;
}
/*labelStyleClass + Container element + Label element*/
.lblChBoxOne.ui-chkbox.ui-chkbox-label{
word-wrap:break-word;
}
/*labelStyleClass + Container element + Label element + Label element of a checked state.*/
.lblChBoxOne.ui-chkbox.ui-chkbox-label.ui-label-active{
word-wrap:break-word;
}
/*labelStyleClass + Container element + Label element + Label element of a focused state .*/
.lblChBoxOne.ui-chkbox.ui-chkbox-label.ui-label-focus{
word-wrap:break-word;
}
/*labelStyleClass + Container element + Label element + Label element of a disabled state.*/
.lblChBoxOne.ui-chkbox.ui-chkbox-label.ui-label-disabled{
word-wrap:break-word;
}
/*styleClass + Label element*/
.chBoxOne.ui-chkbox-label{
word-wrap:break-word;
}
/*styleClass + Container element + Label element*/
.chBoxOne.ui-chkbox.ui-chkbox-label{
word-wrap:break-word;
}
/*styleClass + Container element + Label element + Label element of a checked state.*/
.chBoxOne.ui-chkbox.ui-chkbox-label.ui-label-active{
word-wrap:break-word;
}
/*styleClass + Container element + Label element + Label element of a focused state .*/
.chBoxOne.ui-chkbox.ui-chkbox-label.ui-label-focus{
word-wrap:break-word;
}
/*styleClass + Container element + Label element + Label element of a disabled state.*/
.chBoxOne.ui-chkbox.ui-chkbox-label.ui-label-disabled{
word-wrap:break-word;
}
Aucun commentaire:
Enregistrer un commentaire