Prime Community Forum

Posted: **11 Jan 2018, 16:39**

Using this sample with Barcelona

<div class="card card-w-title">
    <h1>Checkboxes</h1>
    <p:selectBooleanCheckbox value="1" itemLabel="Xbox One" />
    <br />
    <p:selectBooleanCheckbox value="3" itemLabel="PS+" />
    <br />
    <p:selectBooleanCheckbox value="2" itemLabel="Wii U"/>
</div>

Results into this:

You set a width and height to the wrong place. See _forms.scss:

Code: Select all

.ui-chkbox {
        display: inline-block;
        vertical-align: middle;
        width: $iconWidth - 2px;
        height: $iconHeight - 2px;
        cursor: default;
        margin: 0 4px 0 0;
        ...
}

On PF showcase, it shows these are set on .ui-chkbox .ui-chkbox-box. Although, once this fix is done, try to select/unselect checkbox you'll see a gap showing up.

@aragorn@woof Could you fix this one please?

Posted: **22 Jan 2018, 12:06**

Nothing...?

Posted: **22 Jan 2018, 12:56**

Thanks a lot for the screenshot. We're working on this issue.

Posted: **22 Jan 2018, 13:48**

Please try;

Code: Select all

body .ui-chkbox {
   width: auto;
   height: auto;
}
body .ui-chkbox .ui-chkbox-box .ui-chkbox-icon {
   width: 18px;
    height: 18px;
}

Fixed for next version.

Prime Community Forum

SelectBooleanCheckbox: Wrong style with Barcelona

SelectBooleanCheckbox: Wrong style with Barcelona

Re: SelectBooleanCheckbox: Wrong style with Barcelona

Re: SelectBooleanCheckbox: Wrong style with Barcelona

Re: SelectBooleanCheckbox: Wrong style with Barcelona