1

I am using Primefaces version 5.2 . I need to increase the height nd width of check box , i tried two possible css and tried to override but i couldnt find any changes. As i am new to Styling can some one tell me whats the rightway to do it

CSS example 1

.ui-chkbox-icon.ui-icon {
    width: 32px;
    width:32px;

.ui-chkbox-blank.ui-icon {
    width: 32px;
    width:32px;
    overflow: visible;
}
.ui-chkbox-check.ui-icon {
    width: 32px;
    width:32px;
    overflow: visible;
}

CSS example 2

.ui-chkbox .ui-chkbox-box {
    height: 32px;
    width: 32px;
}

.ui-chkbox .ui-chkbox-icon {
    height: 32px;
    width: 32px;
}

.ui-chkbox  .ui-chkbox-label {
    height: 32px;
    width: 32px;
}
.ui-chkbox  .ui-chkbox-blank{
    height: 32px;
    width: 32px;
}
ui-chkbox  .ui-chkbox-check {
    height: 32px;
    width: 32px;
}

Result after using 

body .ui-chkbox, body .ui-chkbox .ui-chkbox-box {
    height: 32px;
    width: 32px;
}

.ui-chkbox .ui-chkbox-label {
    line-height: 32px;

}

enter image description here

Vivek Shankar
  • 71
  • 7
  • Can you post also the XHTML of these checkboxes as a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example)? – WoAiNii May 08 '20 at 16:16
  • Does this answer your question? [How do I override default PrimeFaces CSS with custom styles?](https://stackoverflow.com/questions/8768317/how-do-i-override-default-primefaces-css-with-custom-styles) – Kukeltje May 09 '20 at 08:42

2 Answers2

1
body .ui-chkbox .ui-chkbox-box {

    width: 40px;
    height: 40px;

}

Try this

Jeyas
  • 9
  • 2
0
body .ui-chkbox, body .ui-chkbox .ui-chkbox-box {
    height: 32px;
    width: 32px;
}
body .ui-chkbox .ui-chkbox-label {
    line-height: 32px;
}

Try this

antlis
  • 427
  • 4
  • 8
  • Your checkbox looks differently, is it some kind of custom theme? When I applied my styles, I've been looking for this example [primefaces boolean checkbox](https://www.primefaces.org/showcase/ui/input/booleanCheckbox.xhtml) – antlis May 08 '20 at 16:56