SelectBooleanCheckbox: Wrong style with Barcelona

Post Reply
Babas007
Posts: 250
Joined: 24 May 2011, 09:42

11 Jan 2018, 16:39

Using this sample with Barcelona

Code: Select all

<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:
Image

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?

Babas007
Posts: 250
Joined: 24 May 2011, 09:42

22 Jan 2018, 12:06

Nothing...?

User avatar
aragorn
Posts: 3081
Joined: 29 Jun 2013, 12:38

22 Jan 2018, 12:56

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

User avatar
aragorn
Posts: 3081
Joined: 29 Jun 2013, 12:38

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.

Post Reply

Return to “Barcelona - PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest