CODEWITHSUNDEEP
cssjsfprimefaces
Abhishek Dhote
Abhishek Dhote

Reputation: 1648

how to remove margins of <p:layoutUnit>

Is it possible to remove all the margins of <p:layoutUnit> on all the four sides in my below mentioned code?

            <p:layout style="max-width: 80%;height: 700px" fullPage="false">
            <p:layoutUnit position="north" size="100" style="border: 0px">
                <div align="right">
                    <p:selectOneMenu id="city">  
                        <f:selectItem itemLabel="Select City" itemValue="" />  />  
                    </p:selectOneMenu>                                             
                </div>
                <h:graphicImage alt="DiscountBox.in" value="/images/discountbox_logo.jpg" /> 
            </p:layoutUnit>

            <p:layoutUnit position="west" size="20%" style="border: 0px">
                <p:panel header="Categories">  
                    <p:menu style="border: 0px">
                        <p:submenu>
                            <p:menuitem value="Demo" url="http://www.primefaces.org/showcase-labs/ui/home.jsf" />
                            <p:separator />
                            <p:menuitem value="Documentation" url="http://www.primefaces.org/documentation.html" />
                            <p:separator />
                            <p:menuitem value="Forum" url="http://forum.primefaces.org/" />
                            <p:separator />
                            <p:menuitem value="Themes" url="http://www.primefaces.org/themes.html" />
                        </p:submenu>                          
                    </p:menu>                        
                </p:panel>
            </p:layoutUnit>

            <p:layoutUnit position="center" style="border: 0px">
                <p:panel header="Search">  
                </p:panel>  
                <p:panel header="Search">  
                </p:panel>                      
            </p:layoutUnit>

            <p:layoutUnit position="south" size="100" style="border: 0px">
                Footer
            </p:layoutUnit>                
        </p:layout>

Upvotes: 1

Views: 9509

Answers (2)

Lucas Do Amaral
Lucas Do Amaral

Reputation: 137

There is a property in the p:layoutunit called gutter

<p:layoutUnit position="north" size="80" gutter="0">

Upvotes: 3

user1852036
user1852036

Reputation:

put on your page this:

<head>
    <style type="text/css">
        .ui-layout, .ui-layout-doc, .ui-layout-unit, .ui-layout-wrap, .ui-layout-bd, .ui-layout-hd{
             border: none;
        }
    </style>
</head>

Upvotes: 3

Related Questions