All geek questions in one place

PrimeFaces 3.0 - How to prevent <p: layoutUnit> from showing borders and / or scroll bars?

I am using PrimeFaces 3.0 and I want to include <p:layout> in my pages. The layout component in fullPage mode does a great job of dividing the page, but I have some problems with the appearance. This is what my test page looks like:

enter image description here

Look specifically at the unit block. I want to change two things.

  • How can I stop him from displaying this layout with a frame around it?
  • How can I stop it from showing the scrollbar when the content is too large to fit? I just want it to pin content.

I just bought the PrimeFaces 2.2 manual (there is no 3.0 manual yet), but it is not talking about this change. Do I need to do some CSS style magic?

+6
source share
6 answers

The two main types of browser in my target environment are IE 6 and IE 7. Unfortunately, I was able to fix issue # 1 for these browsers. CSS to display border stop:

 .ui-layout-pane-south { border: 0; }

If I wanted ALL of the layout blocks to stop displaying the border, this would be:

 .ui-layout-pane { border: 0; }

I followed BalusC's suggestion to try using Firefox / Firebug to validate HTML and play with CSS styles. It looks like the main CSS based on the theme is used here: .ui-layout-pane-south , .ui-layout-unit-content , .ui-layout-south .

I tried messing with all of them, but I can’t get IE 7 (IE version on my development workstation) to stop showing the overflow scrollbar. Firefox 4 never showed a scrollbar in the first place.

In any case, the border was the most important thing to get rid of and which has now been fixed. I can prevent the scrollbar from overflowing by trying not to overflow the borders of my layout blocks.

+7
source

set:

 <head> <style type="text/css"> .ui-layout-unit{ border: none; } </style> </head>
+3
source

I solved problem 2 as follows:

 <p:layoutUnit position="north" styleClass="noScrolllayoutUnit"> <ui:include src="/templates/header.xhtml" /> </p:layoutUnit>

and in css

 .noScrolllayoutUnit .ui-layout-unit-content{ overflow: hidden; }
+3
source

Just add a border: 0; in p: layoutUnit style: It works great.

 <p:layoutUnit position="north" size="50" style="border: 0;"> <h:panelGrid id="loginPanelGrid" bgcolor="#E1F5A9" width="99%" columns="2" style="height:30px;"> <h:form id="homeHeaderForm"> <h:outputText value="Hello #{loginBean.userDetails.employee.name}" style="color:red;font-size: 15px;margin-left: 75%"/> <p:commandButton style="background: #3498db;width:80px;height:25px;font-family: Arial;color: #ffffff;font-size: 13px;margin-left: 5%;" action="#{loginBean.logOut}" value="Log Out" ajax="false"> </p:commandButton> </h:form> </h:panelGrid> </p:layoutUnit>
+1
source

To get rid of the scroll bar in all layout panels, you must override the css overflow property with hidden in the ui-layout-unit class. The default value is "auto". To get rid of the scroll bar in one or more specific layout panels, setting the property in the ui-layout- {position} class will not work as you would expect. Setting the property in the contained element will work. Therefore, in your case, you will need to set style="overflow: hidden" in the <h:outputText> or something that creates the text "Southern content ...".

0
source

@Mohammed If you want to apply it on one element, you can do the following:

 <p:layoutUnit styleClass="ui-layout-unit"> ... </p:layoutUnit>

You also need the user css defined somewhere as in user1852036 answer:

 <style type="text/css"> .ui-layout-unit{ border: none; } </style>
-1
source

Source: https://habr.com/ru/post/890763/

More articles:


All Articles