primefaces: how to disable css in

Question

i'm using <p:layout> and <p:layoutUnit> to organise the structure of my web page, and primefaces add his own css to the content here are some images to help you understand :

befor : After :

and i want to know if there is away to only disable the css of <p:layoutUnit>. thank you.

Answer 1

Just override the style class for the desired unit:

• ui-layout-unit for all the layout units
• ui-layout-{position} for a layout unit in a specific position

There's no magic bullet to unset every CSS property, so you need to override a specific property as in:

1. Override the CSS class in your view

   .your-custom-theme-elem .ui-layout-unit {
        font-family: Arial,sans-serif;
   }
   

2. Apply the custom class to the layout unit

    <p:layoutUnit styleClass=".your-custom-theme-elem" position="north" size="100" header="Top" resizable="true" closable="true" collapsible="true">
         <h:outputText value="North unit content." />
    </p:layoutUnit>