I'm using primefaces 5.0. Below is my page where I like to set the height fix to 200px of the layoutunit west and center. Is there any possibility to do this? The current height will be ignored.
<?xml version="1.0" encoding="UTF-8"?>
<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html" xmlns:p="http://primefaces.org/ui" template="/templates/template.xhtml">
<ui:define name="header_title">
<h:outputText value="Titel" align="center" />
</ui:define>
<ui:define name="content">
<h:form id="labelForm" style="height:100%">
<p:growl id="growl" showDetail="true" />
<p:layout style="height:100%" fullPage="false" >
<p:layoutUnit position="west" header="west" resizable="false" closable="false" collapsible="false" style="height:200px">
<p:tieredMenu id="type" model="#{dynamicLabelMenu.menu}" trigger="itemSelect" />
</p:layoutUnit>
<p:layoutUnit position="center" resizable="false" closable="false" collapsible="false" header="center" style="height:200px">
<!-- datatable -->
</p:layoutUnit>
<p:layoutUnit position="south" size="100" header="Bottom" resizable="false" closable="false" collapsible="false">
<br/>
<br/>
<!-- datatable -->
</p:layoutUnit>
</p:layout>
</h:form>
</ui:define>
</ui:composition>
The height should be consistent with the other units... meaning if you would like to fix the height of one unit the others have to be also fixed...
The reason behind this is that PrimeFaces embeds the css rules into the style attribute and totally ignores your style.
You have two options to solve this:
If you are okay keeping the consistent between the units, then this might help. Currently your layout has a height of 100% that means the units should fit into the content, but to fix it you might take this approach
<p:layout style="min-height:200px;">
This way you have a minimum height of 200px and it could expand with the content, or just use height:200px.
The other option is to define a CSS class with !important option, although using !important is ugly and not recommended, but in this particular case PrimeFaces is injecting the css into the style attribute making it hard to cascade the height option.
<style>
.westUnit {
height: 200px !important;
}
</style>
<p:layoutUnit position="west" styleClass="westUnit">
Have a look at the CSS priority rules:
http://www.standardista.com/css3/css-specificity/
You can simply overwrite the primefaces CSS rules by adding more specific CSS selectors.
Example :
Primefaces:
.ui-dialog .ui-dialog-title {
text-align : center;
}
Your CSS:
#content .ui-dialog .ui-dialog-title {
text-align : right;
}
You can use the browser debugging tools (F12 in most browsers) to find out witch primefaces css is used for your components. Overwrite them with more specific CSS selectors from your own css code.
Related
I have a JSF template with three important components:
template.xhtml:
<div class="leftStripe">
<ui:insert name="leftStripe"></ui:insert>
</div>
<div class="mainStripe">
<ui:insert name="mainStripe"></ui:insert>
</div>
<div class="rightStripe">
<ui:insert name="rightStripe"></ui:insert>
</div>
style.css:
.mainStripe{width:70%; float:left; margin: auto; min-height: 100%;}
.leftStripe{width:15%; float:left; height:100%;}
.rightStripe{width:14%; float:right; height:100%;}
index.xhtml:
<ui:composition template="resources/templates/template.xhtml">
<ui:define name="mainStripe">
/* something useful... notice there's no leftStripe */
</ui:define>
</ui:composition>
someOtherFile.xhtml:
<ui:composition template="resources/templates/template.xhtml">
<ui:define name="leftStripe">
/* something useful */
</ui:define>
<ui:define name="mainStripe">
/* something useful */
</ui:define>
</ui:composition>
The mainStripe always has some content. The leftStripe might have something in it, but doesn't have to (e.g. in the index.xhtml). But even if it's empty, I want it to be on the page and to "occupy" the leftmost 15% of the page, so the mainStripe could be positioned in the center.
Unfortunately, the leftStripe doesn't show when it's empty.
It will be shown (even in index.xhtml) if I put the fixed height (e.g. 100px) instead of 100%, but I would really like it to fill the whole height of the page. Is there any way to do that?
I have tried the following:
.leftStripe{width:15%; float:left; height:100%;}
.leftStripe:empty{height:100px;}
...but it doesn't work.
If the leftStripe is Empty you could try to print a so it has at least a space as content.
EDIT: Since the clarification. Add the to the template, so if it's not overwritten, it contains only the space, and when it's overwritten, you probably have content.
SO:
template.xhtml:
<div class="leftStripe">
<ui:insert name="leftStripe"> </ui:insert>
</div>
<div class="mainStripe">
<ui:insert name="mainStripe"> </ui:insert>
</div>
<div class="rightStripe">
<ui:insert name="rightStripe"> </ui:insert>
</div>
Could someone help me hide tab headers with css?
I'm using primefaces controls and there is one general tabview on page. And there's one tabview(ribbon) on each tab of general tabview.
I need hide all tabs headers of child tabview, but show tabs headers of general tabview.
I've try to make it by using
.ui-tabs.ui-tabs-top > .ui-tabs-nav {
display: none!important;
}
But this code hides all headers.
My code:
<ui:composition template="./../WEB-INF/pagesTemplate.xhtml">
<ui:define name="content">
<h:form id="centralTable">
<p:tabView id="tabview"
value="#{tabView.tabList}"
widgetVar="wtabview"
style="height: 100%"
dynamic="true">
<p:ajax event="tabChange" listener="#{tabView.onTabChange}"/>
<c:forEach items="#{tabView.tabList}" var="pageUrl">
<p:tab title= "#{msg[tabView.getCommonTitleByPage(pageUrl)]}">
<ui:include src="#{pageUrl}" />
</p:tab>
</c:forEach>
</p:tabView>
</h:form>
</ui:define>
</ui:composition>
Example tab of general tabview:
<p:tab title="#{msg['header.Main.Model']}">
<p:ribbon id="ribbonPannelModel">
<p:tab title="Model" id="tabModel" >
<p:ribbonGroup label="#{msg['header.Common.Editing']}" id="rgModelEdit">
...
</p:ribbonGroup>
</p:tab>
</p:ribbon>
<p:dataTable id="dtModel" widgetVar="wdtModel">
...
</p:dataTable>
</p:tab>
And I need to hide <p:tab title="Model" id="tabModel" > - this header
You must use an id for the tabs that you aim and then apply the style to it
#myTabId .ui-tabs.ui-tabs-top > .ui-tabs-nav {
display: none!important;
}
I am not sure about the space between the #myTabId and .ui-tabs try to use and delete it and see the result
Just add the styleClass "hideTabHeader" to p:tabView styleClass.
<p:tabView id="idXYZTabView" styleClass="hideTabHeader" ..
And the following to your CSS file:
.hideTabHeader > .ui-tabs-nav
{
display: none !important;
}
Easy and reusable for other TabView's.
I have the following p:selectOneRadio :
<p:outputPanel id="customPanel">
<p:selectOneRadio id="customRadio" value="#{dyna.selecetedlist}" layout="grid" columns="1">
<c:forEach var="list" items="#{dyna.userlist}" varStatus="loop">
<f:selectItem itemEscaped="true" itemLabel="#{list.id.tbCode}" itemValue="#{list.id.tbCode}" />
</c:forEach>
<p:ajax update=":form1:tabexam,:form1:msg,:form1:colser" listener="#{dyna.updatecolumns}"/>
</p:selectOneRadio>
</p:outputPanel>
which generate this :
What i want is to override the default icons and layout of p:selectOneRadio.
and render it like below:
To customize the icon, override the .ui-radiobutton-icon on your page (there is a cleaner option of including a properly packaged css file):
<style type="text/css">
.ui-radiobutton-icon{
background: url(imgs/icon.png) no-repeat; !important;
}
</style>
EDIT: Override the
.ui-state-hover class to override the default hover style for the component
.ui-state-active clasas to override the default selected style for the component
Note overriding both classes as listed above will affect all the components on that page. Be sure to use a custom namespace when overriding. Take for example
.my-custom-ns .ui-state-hover{
//css
}
And then in your component definition:
<p:selectOneRadio id="customRadio" value="#{dyna.selecetedlist}" styleClass="my-custom-ns" layout="grid" columns="1">
<c:forEach var="list" items="#{dyna.userlist}" varStatus="loop">
<f:selectItem itemEscaped="true" itemLabel="#{list.id.tbCode}" itemValue="#{list.id.tbCode}" />
</c:forEach>
<p:ajax update=":form1:tabexam,:form1:msg,:form1:colser" listener="#{dyna.updatecolumns}"/>
</p:selectOneRadio>
In Primefaces 3.5 vertical align of p:selectOneMenu and button is weird when you put them in one line. My use case is: user chooses option from menu and then click button to activate it. Issue is - both components have to be in the same line (table row).
XHTML is really easy:
<h:form>
<p:selectOneMenu>
<f:selectItem itemLabel="test" itemValue="test"/>
</p:selectOneMenu>
<p:commandButton value="GO"/>
</h:form>
Unfortunately result is not what I expect:
My expectation is rather something line this: or
I tried to research rendered HTML code with Firebug, but honestly, it's hard for me to found any CSS margin, padding, left, top, or anything like that could help me.
Anyone struggled with such issue (and - hopefully - solved it)?
Solution is:
<style type="text/css">
.selectMenu { display: inline-block; vertical-align: top; }
</style>
<h:form>
<p:selectOneMenu styleClass="selectMenu">
<f:selectItem itemLabel="test" itemValue="test"/>
</p:selectOneMenu>
<p:commandButton value="GO"/>
</h:form>
You can use a panelGrid for auto align easily both of them.
<h:form>
<h:panelGrid columns="2">
<p:selectOneMenu>
<f:selectItem itemLabel="test" itemValue="test"/>
</p:selectOneMenu>
<p:commandButton value="GO"/>
</h:panelGrid>
</h:form>
I have the jsf code and css code below. I'm having trouble getting the css margin attributes to take effect. All the other attributes work fine except margin. What am I doing wrong?
Notice the .contentDialog css class is applied to p:dialog. What I expect is a 100px margin around h:outputText enclosed in f:facet name="header". But it's not happening.
I've tested on IE 7, IE 8, FireFox 7.0.1 and Chrome 16.0.912.63 m. Same problem on all browsers. Also, I'm using PrimeFaces.
JSF CODE
<h:form id="newContentForm">
<p:dialog header="New Menu Item Type..." widgetVar="newWidget"
resizable="false" showEffect="explode" hideEffect="explode" modal="true" closable="false"
styleClass="contentDialog" width="440">
<h:panelGrid id="newPopUpWindow" column="1">
<!-- Grid Header -->
<f:facet name="header">
<h:outputText value="New information"/>
</f:facet>
<!-- Grid Body -->
<h:outputText value="Description:"/>
<p:inputText id="newDescriptionInText" value="#{menuItemTypeContent.selectedContent.menuItemTypeDescr}">
<p:ajax process="#this"/>
</p:inputText>
<!-- Grid Footer -->
<f:facet name="footer">
<!-- Dialog command bottons -->
<h:panelGroup>
<!-- Submit -->
<p:commandButton value="Submit" image="ui-icon ui-icon-check"
actionListener="#{menuItemTypeContent.save}"
oncomplete="handleNewRequest(xhr, status, args)"/>
<!-- Cancel -->
<p:commandButton value="Cancel" image="ui-icon ui-icon-close"
actionListener="#{menuItemTypeContent.clearContent}"
onclick="newWidget.hide()" type="reset"/>
</h:panelGroup>
</f:facet>
</h:panelGrid>
<!-- Submit javascript handler -->
<h:outputScript>
function handleNewRequest(xhr, status, args) {
if (args.duplicateSaveError) {
duplicateError.show();
}else if (args.illegalStatusError) {
deleteError.show();
}else if (args.validationFailed) {
newContentError.show();
}else {
// Hide new content dialog box if add happened without exceptions
newWidget.hide();
}
}
</h:outputScript>
</p:dialog>
</h:form>
CSS CODE
.contentDialog {
font-size:13px;
border:2px solid #2D65B0;
}
.contentDialog table {
border:1px solid #8DB1E2;
width:100%;
}
.contentDialog th {
background-color:#2D65B0;
width:100%;
text-align:left;
color:red;
margin:100px;
}
This is not related to JSF but rather to CSS and html. You cannot use margins to style table cells. What you can use is cellspacing attribute for the entire table or padding for individual cells. You can find more information under this question.