mardi 6 novembre 2018

How to modify label style of primeng checkbox?

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