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>
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>
There is a property in the p:layoutunit called gutter
<p:layoutUnit position="north" size="80" gutter="0">
Related
I have this table with 3 columns. The third column is for validation message which by default is empty.
<h:form>
<h:panelGrid id="panel" styleClass="data_table_pricing" columns="3">
<h:outputText value="Title"/>
<h:inputText id="title" value="#{pricingForm.title}" validatorMessage="Value is too big.">
<f:validateLength minimum="0" maximum="40" />
<f:ajax event="change" render="#form"/>
</h:inputText>
<h:message id="title_message" for="title" style="color:red"/>
<!-- // -->
<h:outputText value="First name"/>
<h:inputText id="first_name" value="#{pricingForm.firstName}" validatorMessage="Value is too big.">
<f:validateLength minimum="0" maximum="40" />
<f:ajax event="change" render="#form"/>
</h:inputText>
<h:message id="first_name_message" for="first_name" style="color:red"/>
<!-- // -->
<h:outputText value="Last name"/>
<h:inputText id="last_name" value="#{pricingForm.lastName}" validatorMessage="Value is too big.">
<f:validateLength minimum="0" maximum="40" />
<f:ajax event="change" render="#form"/>
</h:inputText>
<h:message id="last_name_message" for="last_name" style="color:red"/>
<!-- // -->
</h:panelGrid>
<h:commandLink value="reset" class="link" type="reset" style="margin: 20px;">
<f:ajax execute="#form" render="#form"/>
</h:commandLink>
<h:commandLink value="Next" class="link" style="margin: 20px;" actionListener="#{pricingForm.calculatorPage()}">
<f:ajax execute="#form" render="#form"/>
</h:commandLink>
</h:form>
I use this CSS code to style the table:
.data_table_pricing {
border-spacing: 12px;
border-collapse: separate;
width: 100%;
}
I need to find a way to fix the size the columns. When validation message appears the second column is pushed to the left.
Is there any way to fix the size of the columns?
Setting a fixed width to the td element prevents the column jump.
.data_table_pricing tbody tr td {
width: 33%;
}
Edit:
Solution for variable number of table columns and should be used over above method.
table.data_table_pricing {
table-layout: fixed;
}
My page is rendering correctly when using Google Chrome or Firefox. But when using IE8 or IE9, it gets stretched almost infinitely. It works well on IE10. This page is written in JSF. I am sorry this page is very long.
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui">
<h:head>
</h:head>
<h:body>
<ui:composition template="/templates/CenterHomeTemplate.xhtml">
<ui:define name="main-content">
<p:dialog widgetVar="statusDialog" modal="true" draggable="false"
closable="false" resizable="false" showHeader="false">
<p:graphicImage library="images" name="ajax-loader.gif" />
</p:dialog>
<div align="center">
<h:form prependId="false" id="MigrateAccountForm">
<br />
<p:messages id="msg" globalOnly="true" autoUpdate="true"
showDetail="true" />
<p:tooltip />
<p:panel header="Enter following data for migating old account">
<h:panelGrid columnClasses="col1, col2, col3"
rowClasses="row1, row2" columns="3" id="grid">
<p:outputLabel for="email" value="Requester Email-id : " />
<p:inputText id="email" required="true"
value="#{accountCreationBean.email}" title="Your Email-id"
validatorMessage="Invalid Email-Id : Email-Id must end with #oracle.com"
requiredMessage="Mandatory Field" size="25">
<f:validateRegex pattern=".+#oracle\.com$" />
<p:ajaxStatus onstart="PF('statusDialog').show()"
onsuccess="PF('statusDialog').hide()" />
<p:clientValidator event="blur" />
<f:ajax event="blur"
render="manager-email email-msg cost-center group msg username"
listener="#{accountCreationBean.fetchEmailInfo}" />
</p:inputText>
<p:message id="email-msg" for="email" />
<p:outputLabel for="account-type" value="Account Type : " />
<p:selectOneRadio required="true"
requiredMessage="Mandatory Field" id="account-type"
value="#{accountCreationBean.accountType}">
<p:ajax event="change" update="username nis-accounts"
listener="#{accountCreationBean.changeAccountType}" />
<f:selectItems value="#{accountCreationBean.accountTypes}" />
</p:selectOneRadio>
<p:message for="account-type" />
<p:outputLabel for="username" value="Existing Username : " />
<p:inputText id="username"
disabled="#{accountCreationBean.accountType == 'Individual'}"
required="true" requiredMessage="Mandatory Field" size="25"
value="#{accountCreationBean.username}"
title="Existing username.">
<p:clientValidator event="blur" />
<p:ajax global="false" event="blur" update="username-msg"
listener="#{accountCreationBean.checkUserNameAvailability}" />
</p:inputText>
<p:message id="username-msg" for="username" />
<p:outputLabel for="password" value="Password : " />
<p:password id="password" match="confirm-password"
required="true" requiredMessage="Mandatory Field" size="25"
value="#{accountCreationBean.password}"
title="Enter old password">
<p:clientValidator event="blur" />
</p:password>
<p:message for="password" />
<p:outputLabel for="confirm-password" value="Confirm Password : " />
<p:password id="confirm-password" required="true"
requiredMessage="Mandatory Field" size="25"
value="#{accountCreationBean.confPassword}" />
<p:message for="confirm-password" />
<p:outputLabel for="manager-email" value="Manager's Email-id : " />
<h:outputText id="manager-email"
value="#{accountCreationBean.managerEmail}"
title="Email-id of your approver." />
<p:message for="manager-email" />
<p:outputLabel for="nis-accounts"
value="Permissible NIS Accounts : " />
<p:inputText id="nis-accounts" required="true"
disabled="#{accountCreationBean.accountType == 'Individual'}"
requiredMessage="Mandatory Field" size="25"
value="#{accountCreationBean.nisAccounts}"
title="NIS users to be linked with this account. Separate multiple NIS accounts with comma." />
<p:message for="nis-accounts" />
<p:outputLabel for="privilege" value="Privileges : "
title="Select only required privivledges." />
<p:selectCheckboxMenu id="privilege" required="true"
requiredMessage="Mandatory Field" label="Privileges"
value="#{accountCreationBean.selectedPrivileges}">
<f:selectItems
value="#{accountCreationBean.privileges.entrySet()}" var="c"
itemLabel="#{c.value}" itemValue="#{c.key}" />
</p:selectCheckboxMenu>
<p:message for="privilege" />
<p:outputLabel for="stack" value="Stack : " />
<p:selectOneMenu id="stack" value="#{accountCreationBean.stack}"
required="true">
<f:selectItems value="#{accountCreationBean.stacks.entrySet()}"
var="c" itemLabel="#{c.value}" itemValue="#{c.key}" />
</p:selectOneMenu>
<p:message for="stack" />
<p:outputLabel for="product-id" value="Product ID : " />
<p:inputText id="product-id" required="true"
requiredMessage="Mandatory Field" size="5"
value="#{accountCreationBean.productId}">
<f:validateRegex pattern="[0-9]+" />
<p:clientValidator event="blur" />
<p:ajax global="false" event="blur"
listener="#{accountCreationBean.populateProductName}"
update="product-name product-id-msg" />
</p:inputText>
<h:panelGroup>
<h:outputText id="product-name"
value=" #{accountCreationBean.productName}" />
<p:message id="product-id-msg" for="product-id" />
</h:panelGroup>
<p:outputLabel for="group" value="Group : " />
<h:outputText id="group" value="#{accountCreationBean.group}" />
<p:message for="group" />
<p:outputLabel for="cost-center" value="Cost Center : " />
<h:outputText id="cost-center"
value="#{accountCreationBean.costCenter}" />
<p:message for="cost-center" />
<p:outputLabel for="svp-evp" value="SVP/EVP Email-Id : " />
<p:inputText id="svp-evp" required="true"
requiredMessage="Mandatory Field"
validatorMessage="Invalid Email-Id : Email-Id must end with #oracle.com"
size="25" value="#{accountCreationBean.svpEvp}">
<f:validateRegex pattern=".+#oracle\.com$" />
<p:clientValidator event="blur" />
</p:inputText>
<p:message for="svp-evp" />
<p:outputLabel for="comments" value="Comments : " />
<p:inputTextarea id="comments" required="true"
requiredMessage="Mandatory Field"
value="#{accountCreationBean.comments}" />
<p:message for="comments" />
</h:panelGrid>
</p:panel>
<br />
<p:commandButton resetValues="true" value="Submit"
update="MigrateAccountForm"
action="#{accountCreationBean.migrateOldAccount}" />
<p:separator />
<p:outputLabel style="color: red">
<p:commandButton disabled="true" icon="ui-icon-info" />
<b>Note : </b>For generic accounts a suffix '_grp' will be added to username, if not present, from version 3.0. Till then, current username will work.
</p:outputLabel>
</h:form>
</div>
</ui:define>
</ui:composition>
</h:body>
</html>
The Template used in this page is :
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui">
<h:head>
<style type="text/css">
.ui-layout, .ui-layout-doc, .ui-layout-unit, .ui-layout-wrap, .ui-layout-bd, .ui-layout-hd{
//border: none;
margin: 0;
}
.upper-left-menu {
height: 50px;
}
.ui-widget, .ui-widget .ui-widget {
font-size: 95% !important;
}
</style>
</h:head>
<h:body>
<div align="center">
<table style="border:2; width:70%; border-collapse: collapse">
<tr style="background: aliceblue;">
<td colspan="2">
<ui:insert name="header">
<ui:include src="/includes/header.xhtml"/>
</ui:insert>
</td></tr>
<tr><td colspan="2"><ui:include src="/tabs/tabs.xhtml"/></td></tr>
<tr>
<td colspan="2">
<div align="center">
<ui:insert name="main-content">
<div style="height: 200px">
<h4>This is code Signing SErver Home Page.</h4>
</div>
</ui:insert>
</div>
</td>
</tr>
<tr style="background: aliceblue">
<td style="border-top-color: aliceblue; border-top-style: groove; border-top-width: thin;" colspan="2">
<ui:insert name="footer">
<ui:include src="/includes/footer.xhtml"/>
</ui:insert>
</td></tr>
</table>
</div>
</h:body>
</html>
Now the page is stretched long way for IE8 and 9.
Is there some tag, that is needed to be added or some css or component that is creating problem?
I know this question has been asked some time ago but I had just faced a similar issue. I'm hoping someone can benefit from this. I'm using PF 5.2 and as your question suggests, the page gets stretched almost infinitely. In my case the page was stretched when toggling the select all checkbox in the p:selectCheckboxMenu. A table on my page had been populated through my JS function on toggle. What I found was that when the table is populated, a tbody element tag is added to the table tag. When the elements are removed, there's a leftover tbody tag. For some reason IE doesn't like this. In my function where I'm updating this table based on my selection from my p:selectCheckboxMenu, I added this piece of logic and the page now renders correctly.
//Remove tbody when there are no more elements. In IE this is causing a rendering issue.
if(table.rows.length === 0){
if(table.getElementsByTagName('tbody')[0]){
table.removeChild(table.getElementsByTagName('tbody')[0]);
}
}
I want to design a Layout and the footer should alway been display on the bottom on the page how can I set this with CSS. Here is the application now http://default-environment-wvg8irfup6.elasticbeanstalk.com/public/register.xhtml.
I use jsf 2.2 and primefaces 4.0
Here is the code
<f:view>
<f:metadata>
<ui:insert name="metadata" />
</f:metadata>
<h:outputStylesheet library="css" name="template.css" />
<p:layout fullPage="true">
<p:layoutUnit styleClass="ui-widget-header" position="north" size="110">
<p:layout height="140">
<p:layoutUnit position="west" width="180" height="140">
<p:graphicImage library="images" name="Logo_0.3.png" height="90" width="170" />
</p:layoutUnit>
<p:layoutUnit position="center">
<ui:insert name="header">
<ui:include src="/META-INF/templates/templateMenubar.xhtml" />
</ui:insert>
</p:layoutUnit>
</p:layout>
</p:layoutUnit>
<p:layoutUnit styleClass="content" position="center">
<h1>
<ui:insert name="title">
<h:outputText value="Default Title" />
</ui:insert>
</h1>
<ui:insert name="content">
<ui:include src="/META-INF/templates/templateContent.xhtml" />
</ui:insert>
</p:layoutUnit>
<p:layoutUnit styleClass="ui-widget-header" position="south" size="60">
<p:layout styleClass="footerpic" height="100">
<p:layoutUnit position="center">
</p:layoutUnit>
<p:layoutUnit styleClass="footerpic" position="east" width="300" height="80">
<h:graphicImage styleClass="footerpic" library="images" name="MFMNeu.png" height="25"
width="25" />
</p:layoutUnit>
</p:layout>
</p:layoutUnit>
</p:layout>
</f:view>
Add CSS properties
position:absolute;
bottom:0px;
to your footer.
In my case, I also had to add to the body section height: 100%
My css looks like:
html {
height: 100%
}
body {
height: 100%
}
.my_footer {
position: absolute;
bottom: 0 px;
}
I am working on my first web project and using PrimeFaces component suite for it.
I want fire a resize event when i resize the center layout unit. I have tried the code but the method in the bean class is never get called.
What am I doing wrong here? please correct me if I am wrong?
<p:layout fullPage="true" resizeListner="#{resizeBean.handleResize}">
<p:layoutUnit id="top" position="north" resizable="true" size="20%">
<ui:insert name="header">
<ui:include src="Header.xhtml" />
</ui:insert>
</p:layoutUnit>
<p:layoutUnit id="bottom" styleClass="class-bottom" position="south"
resizable="true" size="25%">
<ui:insert name="footer">
<ui:include src="Footer.xhtml" />
</ui:insert>
</p:layoutUnit>
<p:layoutUnit id="left" styleClass="class-left" position="west"
resizable="true" size="24%">
<ui:insert name="tree">
<ui:include src="Tree.xhtml" />
</ui:insert>
</p:layoutUnit>
<p:layoutUnit id="addDlg" position="center">
<ui:insert>
<ui:include src="AddDevice.xhtml" />
</ui:insert>
</p:layoutUnit>
<p:layoutUnit id="center" position="center">
<ui:insert name="centerPage">
<ui:include src="Center.xhtml" />
</ui:insert>
</p:layoutUnit>
</p:layout>
Here is the code for the bean class
#ManagedBean(name = "resize")
public class ResizeBean implements Serializable {
private long width;
private long height;
public void handleResize(ResizeEvent event) {
width = event.getWidth();
height = event.getWidth();
System.out.println("in resize");
}
public long getWidth() {
return this.width;
}
public long getHeight() {
return this.height;
}
}
Well, I don't know witch version of PrimeFaces you're using, but the attribute resizeListener is not found in de PrimeFaces manual. Also you gave your bean a name with the name attribute:
#ManagedBean(name = "resize")
So if you want to use this in your view, then refer to your given name like this:
#{resize.handleResize}
If you don't use the name attribute then you can refer to resizeBean. More info can be found here: http://docs.oracle.com/javaee/6/api/javax/faces/bean/ManagedBean.html
To get the resize event add a <p:ajax> tag in your view something like this:
<p:ajax event="resize" listener="#{resize.handleResize}" />
And now add the <h:form> tag around your layout and everything should work.
Complete view:
<h:form>
<p:layout fullPage="true">
<p:ajax event="resize" listener="#{resize.handleResize}" />
<p:layoutUnit id="top" position="north" resizable="true" size="20%">
<ui:insert name="header">
<ui:include src="Header.xhtml" />
</ui:insert>
</p:layoutUnit>
<p:layoutUnit id="bottom" styleClass="class-bottom" position="south"
resizable="true" size="25%">
<ui:insert name="footer">
<ui:include src="Footer.xhtml" />
</ui:insert>
</p:layoutUnit>
<p:layoutUnit id="left" styleClass="class-left" position="west"
resizable="true" size="24%">
<ui:insert name="tree">
<ui:include src="Tree.xhtml" />
</ui:insert>
</p:layoutUnit>
<p:layoutUnit id="addDlg" position="center">
<ui:insert>
<ui:include src="AddDevice.xhtml" />
</ui:insert>
</p:layoutUnit>
<p:layoutUnit id="center" position="center">
<ui:insert name="centerPage">
<ui:include src="Center.xhtml" />
</ui:insert>
</p:layoutUnit>
</p:layout>
<h:/form>
I am using <p:rating> in my JSF2-PrimeFace application. Find the code below:
<p:panel id="popular_offers_panel" style="width: 97%" styleClass="remove-PF-border panel-grid tr panel-grid td panel-header-title-medium">
<p:dataGrid id="popular_offers_data_grid" var="offer" value="#{HmBen.offersList}" columns="3" paginatorAlwaysVisible="false" styleClass="no-border-for-component">
<h:link title="#{msg._offer_on}#{msg._colon} #{offer.tag}" outcome="offer_details?offer=#{offer.seoURL}">
<p:panel id="popular_offers_details_panel" header="#{offer.where}" styleClass="panel-content-central-horizontal small-panel panel-grid tr panel-grid td panel-hover panel-header-title-small">
<p:panelGrid columns="1" style="text-align: center">
<div class="component-spacing-top"/>
<h:graphicImage alt="#{offer.where}" value="#{offer.imgFullPath}" class="small-panel-image" />
<p:rating value="#{offer.rating}" readonly="true" />
<p:panel styleClass="remove-PF-border">
<h:outputText value="#{offer.what}" rendered="#{offer.isOfferByTitle}" styleClass="font-size-1em font-weight-bold default-font-color" />
<h:outputText value="#{offer.discount}" rendered="#{offer.isOfferByDetails}" styleClass="font-size-1em font-weight-bold default-font-color" />
<sup>
<h:outputText value="#{msg._expiring_soon}" rendered="#{offer.isExpiringSoon}" styleClass="font-size-0-8em default-contrast-font-color" />
<h:outputText value="#{msg._this_offer_might_have_expired}" rendered="#{offer.isMightHaveExpired}" styleClass="font-size-0-8em default-contrast-font-color" />
<h:outputText value="#{msg._this_offer_has_expired}" rendered="#{offer.isExpired}" styleClass="font-size-0-8em default-contrast-font-color" />
</sup>
</p:panel>
</p:panelGrid>
</p:panel>
</h:link>
</p:dataGrid>
</p:panel>
Any clue on this?
Since p:rating render divs for each stars and they are floating, the main div has no size. Here is a way to achieve your goal :
CSS :
.center-rating
{
width: 96px;
margin: 0 auto;
}
View :
<p:rating value="#{offer.rating}" readonly="true" styleClass="center-rating" />