I am trying to overriding the Primefaces Theme my css look like this in file1.xhtml
.ui-menubar {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px!important;
background: #D4C5F7!important;
}
In File2.xhtml i have used this css
.ui-menubar {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
background: #557FFF!important;
}
But when i checked in browser its showing file1 css in both places,what i am doing wrong here?
File1.xhtml and File2.xhtml both are in included in File3.xhtml file
See how the code look like
<p:layoutUnit position="north" size="100" id="north"
resizable="false" closable="false" style="border:none">
<ui:insert name="north">
<ui:include src="/template/top_header.xhtml" />
<ui:include src="/template/header_menu.xhtml" />
</ui:insert>
</p:layoutUnit>
CSS is applied on the HTML document as whole. CSS is not applied on a per-include-file basis or so as you seem to think. CSS does not run in webserver. CSS runs in webbrowser, after the webbrowser has parsed the HTML output retrieved from JSF and is presenting it visually to the enduser.
If you want to give a specific component a different style from default, then you should give it a class name.
<x:someComponent styleClass="someClass">
Then you can finetune the CSS selector on that:
.ui-menubar.someClass {
...
}
(name it more sensibly though, e.g. leftMenu, topMenu, etc)
Unrelated to the concrete problem, the !important is here being used as a workaround, not as a solution. Get rid of it and carefully read the following answer, including all of its links, in order to learn how to properly override PrimeFaces default CSS: How do I override default PrimeFaces CSS with custom styles?
Related
I'm trying to create a dialog with a loading gif without any borders or background for my web application. I'm using PrimeFaces for JSF. I can't delete the shadow on the border.
Here image and code:
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:p="http://primefaces.org/ui">
<style>
.loadingPanel .ui-widget-content{
background: transparent !important;
border:none !important;
box-shadow:none !important;
}
</style>
<p:dialog widgetVar="loadingDialog" draggable="false" modal="true" closable="false" resizable="false" showHeader="false" styleClass="loadingPanel">
<p:graphicImage name="images/loading_spinner.gif" library="ecuador-layout" />
</p:dialog>
</html>
The problem is with the GIF format. It doesn't support alpha channel transparency, so the edges of transparent images can look very bad (depending on the background it's displayed on).
Instead of a GIF animation you could use a SVG animation or use an animated icon, for example using PrimeIcons:
<i class="pi pi-spin pi-spinner" style="font-size: 3em"></i>
See also:
How to get better transparency with GIFs?
https://www.google.com/search?q=svg+loader+animation
According to this link:
How to create a custom Facelets tag?
I was able to create a facelet tag files.
A part of my CustomGraphicImage.xhtml file:
<h:graphicImage style="border: #{border}px solid #000000" height="#{height}" width="#{width}" alt="#{alt}" library="image" name="#{value}" />
My test.xhtml file:
<my:ImgPath border="1" value="loading_pt01.gif"></my:ImgPath>
The problem is that when view HTML source code, undefined attributes still appear. In the below example, undefined tags are alt, height, width.
<img src="/demo-project/javax.faces.resource/loading_pt01.gif.xhtml?ln=image" style="border: 1px solid #000000" alt height width>
How can I display only defined attributes?
I'm thinking about using <c:if> to decide to whether display the attributes or not but that seems too much work.
I have a page with a "header", "footer", "side menu" and a "content area".
I'm trying to arrange them using PrimeFaces layouts as follows:
Header -->North
Footer --> South
Side Menu --> East
Content Area --> Center
At a first glance, it's working fine.
However, my side menu contains links that will change the contents of the center area. Currently, when I click one of the links, the center area's contents will change and a vertical scroll bar will appear in the center area if the new contents have a length that is larger than the one defined for the center layoutunit.
The behavior I'm looking for is to resize the center area dynamically, pushing down the footer (south layoutunit) and showing a scroll bar for the whole page.
Is it correct that I'm using PrimeFaces layouts? Should I use something else?
Here is my "body" code:
<h:body>
<p:layout fullPage="true">
<p:layoutUnit position="north" size="100">
<ui:include src="header.xhtml" />
</p:layoutUnit>
<p:layoutUnit position="south" size="200">
<ui:include src="footer.xhtml" />
</p:layoutUnit>
<p:layoutUnit position="east" size="260">
<ui:include src="side-menu.xhtml" />
</p:layoutUnit>
<p:layoutUnit position="center">
<ui:insert name="body-content">
</ui:insert>
</p:layoutUnit>
</p:layout>
</h:body>
Thanks for your help
Is it correct that I'm using PrimeFaces layouts? Should I use something else?
Answer: It depends. I think, p:layout fullPage="true" is a component for whom wants to create a page super quick, simple and who does not have enough time with labour with view layer. If the showcase example is corresponding your requirements barely then there is no reason to drop it.
But if you want to customize or change it's behaviour or it's functionality stop and roll your own.
I have prepared a kickoff example which suits your requirements, as I said, it is not complete but it can inspire you. Let's start with components;
<h:form>
<p:fieldset legend="West" styleClass="west">
</p:fieldset>
<p:panel styleClass="north">
</p:panel>
<p:fieldset legend="East" styleClass="east">
</p:fieldset>
<p:fieldset legend="Center" styleClass="center">
</p:fieldset>
<p:panel styleClass="footer">
<p:commandButton onclick="makeMe();" value="SeeTheMagic"></p:commandButton>
</p:panel>
</h:form>
As it can be seen, these are the basic PrimeFaces components, point here CSS's itself. (I've used p:fieldset, cause I like it's looknfeel you can use p:panel instead).
Let's start with footer. There is a thing that deserves to be mentioned, it's position, we are just placing it to bottom of the page via bottom:0px and position:absolute.
.footer{
width:100%;
height:30px;
padding:30px;
background: #000007;
clear: both;
position: absolute;
bottom: 0px;
}
Center component is HORIZONTALLY centered by margin 0 auto. There are other ways to do surely. Also if you want to center it vertically it is simple to do via margin. And margin-top:70px is just preventing overlap with north panel.
.center{
margin: 0 auto;
width:650px;
height:200px;
margin-top: 70px;
background-color: #f7f7f7;
}
East is positioned to most-left and west; vice versa.
.east{
width:200px;
height:400px;
position: absolute;
margin-top: 30px;
right: 0px;
background-color: #f7f7f7;
}
.west{
width:200px;
height:400px;
margin-top: 30px;
position: absolute;
left: 0px;
background-color: #f7f7f7;
}
North component is just like the footer but it is on the top of course via top:0px.
.north {
background-color: black;
position: absolute;
top:0px;
width: 100%;
height: 40px;
}
Now page looks like sth. similar to p:layout fullPage="true". You should customize it's looknfeel of course, maybe you can have a look to newer CSS properties like box-shadow(for north panel) or etc. Consequently about your requirement:
The behavior I'm looking for is to resize the center area dynamically,
pushing down the footer (south layoutunit) and showing a scroll bar
for the whole page.
I've prepared a content which is initially overflows from center panel and then there is a button on the footer which says sth. about magic and it calls makeMe() js function which does:
function makeMe() {
$(".center").css({
"height":"auto",
"word-wrap": "break-word"
});
$(".footer").css({
"position":"relative"
});
}
Simply expands the p:panel's height, now if it has 100 content items it will compass all of them. And via position:relative, we are saying to footer "don't stay there just stick into bottom of center component."
This is how it looks initially:
If you are loading your content via ajax there won't be a scrollbar initially. I just copied lot's of text into it that's why there is a scrollbar initially.
After clicking the button:
If there will be problem just warn me, hope that helps.
a newbie primefaces question:
When I create a simple primeface page, what should I put in order to have the text styled?
<h:body>
<!-- Ok, what I put here to have styled the following H1 and outputText? -->
<h1>Not styled h1</h1>
<h:outputText value="Not styled text." />
</h:body>
</html>
I am able to get styled text by placing it inside a <\p:panel>, but I find that a bit annoying to place everything in panels.
Use css to change it, it's the most elegant solution. You can create your own classes or override existing primefaces ones if you're sure you aren't going to use the original ones. Remember to add !important at the end of the attributes set.
.ui-panel
{
border: black solid 1px !important;
}
You can just follow this tutorial about how and where to add your css reference in order to make Primefaces styles overriden.
I am using t:datalist with JSF 2.0 to allign images horizontally . But i would like to list the properties of each image below the image vertically.Now the properties are also listed horizontally along with images. The code i use is :
<t:dataList var="item" value="#{listItems.dataList}" id="listItems">
<h:graphicImage url="#{item.prodFileName}" width="100" height="100" />
<h:outputText value="#{item.prodName}" />
<h:outputText value="#{item.prodPrice}" />
</t:dataList>
I am not able to use plain html table tag inside the datalist to list the name and price properties below the image. Found a tag named f:verbatim after some search , but i could not make it work either. Tried putting the html table tag inside a panelGroup too.
Wrap them in a left-floating <div> and put the lines below the image by <br>.
<t:dataList var="item" value="#{listItems.dataList}" id="listItems">
<div class="box">
<h:graphicImage url="#{item.prodFileName}" width="100" height="100" />
<br /><h:outputText value="#{item.prodName}" />
<br /><h:outputText value="#{item.prodPrice}" />
</div>
</t:dataList>
With for example this CSS
.box {
float: left;
margin: 5px;
padding: 5px;
border: 1px solid gray;
}
Only make sure that you've a clear: left; on the containing element so that floats don't go beyond the container.
Unrelated to the problem, please keep in mind that <f:verbatim> is deprecated in JSF 2. You should not use it anymore. You also do not need it anymore. In JSF 1.0/1.1 that tag was mandatory in order to be able to use plain HTML tags in a JSF page. Since JSF 1.2 it is not mandatory anymore. You can just inline HTML tags in a JSF page there where you want without fiddling with <f:verbatim>.