Page long stretched on internet explorer 8/9 with Primefaces

Page long stretched on internet explorer 8/9 with Primefaces - css

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]);
}
}

Related

set selected value to bean to respective input fields

i have my dialog this
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<p:dialog header="Look Up" width="400px" resizable="false" modal="true"
widgetVar="dlg200">
<p:dataTable style="font-size:13px;" paginatorPosition="bottom"
id="dialoglov" var="lov" value="#{mmsBean.admlovs}"
selection="#{mmsBean.selectedadmlovs}" selectionMode="single"
resizableColumns="true" scrollable="true" scrollHeight="150"
rowKey="#{lov.id}" rows="5" paginator="false"
paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
rowsPerPageTemplate="5,10,15"
emptyMessage="No data found with given criteria ">
<p:ajax event="rowDblselect" oncomplete="PF('dlg200').hide()" />
<p:column style="font-size:13px;" headerText="Code"
sortBy="#{lov.code}" filterBy="#{lov.code}"
filterMatchMode="contains">
<h:outputText style="font-size:13px;" value="#{lov.code}" />
</p:column>
<p:column style="font-size:13px;" headerText="Description"
sortBy="#{lov.descr}" filterBy="#{lov.descr}"
filterMatchMode="contains">
<h:outputText style="font-size:13px;" value="#{lov.descr}" />
</p:column>
</p:dataTable>
<p:commandButton value="Select" onclick="PF('dlg200').hide()"
style="margin-top:10px !important" />
</p:dialog>
and from which the dialogue is calling is
<div class="col-md-12 " style="margin-top: 2% !important;">
<div class="col-md-4" style="text-align: center;">
<p:outputLabel styleClass="WhiteBlue" value="Estimated" />
</div>
<div class="col-md-4">
<h:inputText type="text" styleClass="form-control"
id="fvar" value="#{pmBean.selectedadmlovs.code}"
title="Estimated Cost Of WorkOrder" />
</div>
<div class="col-md-3">
<h:inputText type="text" styleClass="form-control"
id="fvaar" value="#{pmBean.selectedadmlovs.descr}"
title="Estimated Cost Currency" />
</div>
<div class="col-md-1">
<p:commandButton onclick="PF('dlg200').show();"
action="#{lovController.lovForFincurrency('fincurrency:fvar')}"
icon="fa fa-search Fs12 White
styleClass="BlueTextButton" process="#this"
update="dialoglov fvar" />
</div>
</div>
i want to set the selected value from dialogue to both of input fields
there are too many input fields so and one dialogue. when ever the dialogue is open and user select the value from it, it should set the value respectively to that particular field. i want to make generic
thanks

Columns alignment in in h:panelGrid

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;
}

Align a PanelGrid which is in another PanelGrid

Hi everyBody I 'm searching for way to have a page like this picture
without the banner(Only the part After it)
I have tested all the issues about the style vertical align , top and stuff like this and none worked for me so if anyone have any solution it will be greate and thank you
and this how my page look like actually (code)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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>
.className td{
vertical-align: top;
}
</style>
<style>
.panelGridCenter {
margin: 0 auto;
}
</style>
</h:head>
<body>
<ui:repeat var="offre" value="#{offreBean.offres}" varStatus="status">
<h:link id="offre" value="#{offre.profilPrincipal}"
fragment="#{offre.id}" />
<br></br>
</ui:repeat>
<p:panelGrid columns="2" styleClass="classeName" style="display:block" >
<ui:repeat var="offre" value="#{offreBean.offres}" varStatus="status">
<span id="#{offre.id}">
<h:panelGrid columns="2"
style="width:600px" >
<h:outputLabel value="Profil Principal : " />
<h:outputText value="#{offre.profilPrincipal}" />
<h:outputLabel value="Mission : " />
<h:outputText value="#{offre.mission}" />
<h:outputLabel value="Profil : " />
<h:outputText value="#{offre.profil}" />
<h:outputLabel value="Specificite du Poste : " />
<h:outputText value="#{offre.speceificitePoste}" />
<h:outputLabel value="Niveau Etude : " />
<h:outputText value="#{offre.niveauEtude}" />
<h:outputLabel value="Experience Mini : " />
<h:outputText value="#{offre.niveauExperienceMin}" />
<br></br>
</h:panelGrid>
</span>
</ui:repeat>
<h:panelGrid columns="2" >
<h:outputLabel value="Profil Principal" />
<h:inputText value="#{offreBean.profil}" />
<h:outputLabel value="Contrat" />
<p:selectOneMenu value="#{offreBean.offres}"
converter="ContratConverter">
<f:selectItem itemLabel="Choisir Contrat :" />
<f:selectItems value="#{offreBean.contrats}" var="contrat"
itemValue="#{contrat}" itemLabel="#{contrat.contrat}" />
</p:selectOneMenu>
<h:outputLabel value="Categorie" />
<p:selectOneMenu value="#{offreBean.categorieoffres}"
converter="CategorieConverter">
<f:selectItem itemLabel="Choisir Categorie :" />
<f:selectItems value="#{offreBean.categorieoffres}" var="categorie"
itemValue="#{categorie}" itemLabel="#{categorie.categorie}" />
</p:selectOneMenu>
<h:outputLabel value="Mots Clés" />
<h:inputText value="#{offreBean.motclé}" />
<p:commandButton value="Chercher" />
</h:panelGrid>
</p:panelGrid>
</body>
</html>

first add this :
<h:head>
<style>
.className td {
vertical-align: top;
}
</style>
</head>
and
<h:panelGrid columns="2" id="container" styleClass="className"
style="display:block;">
and clean tomcat work directory, clean the browser cache and it working like a charme !!!!

How to change width of Primefaces components?

How to change width of outputLabel, inputText components in Primefaces. Is custom style can be applied on Primefaces components?.
I tried below custom style class but these are not working.
style.css
.customTxtWidth150px .ui-inputfield .ui-inputtext .ui-widget{
width:150px !important;
}
.customLblWidth150px .ui-outputlabel {
width: 150px;
}
.lblRed {
color: red;
}
.lblWhite {
color: white;
}
registration.xhtml
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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">
<f:view>
<h:head>
<title>Registration</title>
<f:loadBundle var="mysqlmaven" basename="com.uk.mysqlmaven.resources.mysqlmaven" />
<h:outputStylesheet name="style/mysqlmaven.css"></h:outputStylesheet>
</h:head>
<h:form id="registrationForm">
<table align="center">
<tr>
<td><h:panelGrid>
<h:messages id="registrationMessageId"></h:messages>
</h:panelGrid> <h:panelGrid columns="1" cellpadding="2" frame="hsides" border="0">
<h:panelGrid columns="2" border="0">
<p:outputLabel value="*" styleClass="lblRed"></p:outputLabel>
<h:panelGroup layout="block">
<p:outputLabel value="FirstName" styleClass="customLblWidth150px"></p:outputLabel>
<p:inputText id="firstNameId" value="#{registrationBean.firstName}" styleClass="customTxtWidth150px"></p:inputText>
</h:panelGroup>
</h:panelGrid>
<h:panelGrid columns="2" border="0">
<h:panelGroup>
<p:outputLabel value="*" styleClass="lblWhite"></p:outputLabel>
<p:outputLabel value="MiddleName" styleClass="customLblWidth150px"></p:outputLabel>
<p:inputText id="middleNameId" value="#{registrationBean.middleName}" styleClass="customTxtWidth150px"></p:inputText>
</h:panelGroup>
</h:panelGrid>
<h:panelGrid columns="2">
<h:panelGroup>
<p:outputLabel value="*" styleClass="lblRed"></p:outputLabel>
<p:outputLabel value="#{mysqlmaven.lblLastName}"></p:outputLabel>
<p:inputText id="lastNameId" label="#{mysqlmaven.lblLastName}" value="#{registrationBean.lastName}"></p:inputText>
</h:panelGroup>
</h:panelGrid>
<h:panelGrid columns="2">
<h:panelGroup>
<p:outputLabel value="*" styleClass="lblRed"></p:outputLabel>
<p:outputLabel value="#{mysqlmaven.lblFathersOrGuardianName}"></p:outputLabel>
<p:inputText id="fathersOrGuardianNameId" label="#{mysqlmaven.lblFathersOrGuardianName}" value="#{registrationBean.fathersOrGuardianName}"></p:inputText>
</h:panelGroup>
</h:panelGrid>
<h:panelGrid columns="2">
<h:panelGroup>
<p:outputLabel value="*" styleClass="lblWhite"></p:outputLabel>
<p:outputLabel value="#{mysqlmaven.lblQualification}"></p:outputLabel>
<p:inputText id="qualificationId" label="#{mysqlmaven.lblQualification}" value="#{registrationBean.qualification}"></p:inputText>
</h:panelGroup>
</h:panelGrid>
<h:panelGrid columns="2">
<h:panelGroup>
<p:outputLabel value="*" styleClass="lblRed"></p:outputLabel>
<p:outputLabel value="#{mysqlmaven.lblDateOfBirth}"></p:outputLabel>
<p:calendar id="dateOfBirthId" label="#{mysqlmaven.lblDateOfBirth}" value="#{registrationBean.dateOfBirth}" pattern="dd-MMM-yyyy" showWeek="true" navigator="true" yearRange="c-100:c+0"></p:calendar>
</h:panelGroup>
</h:panelGrid>
<h:panelGrid columns="2">
<h:panelGroup>
<p:outputLabel value="*" styleClass="lblRed"></p:outputLabel>
<p:outputLabel value="#{mysqlmaven.lblPrimaryEmail}"></p:outputLabel>
<p:inputText id="primaryEmailId" label="#{mysqlmaven.lblPrimaryEmail}" value="#{registrationBean.primaryEmail}"></p:inputText>
</h:panelGroup>
</h:panelGrid>
<h:panelGrid columns="2">
<h:panelGroup>
<p:outputLabel value="*" styleClass="lblRed"></p:outputLabel>
<p:outputLabel value="#{mysqlmaven.lblMobile}"></p:outputLabel>
<p:inputText id="mobileId" label="#{mysqlmaven.lblMobile}" value="#{registrationBean.mobile}"></p:inputText>
</h:panelGroup>
</h:panelGrid>
<h:panelGrid columns="2">
<h:panelGroup>
<p:outputLabel value="*" styleClass="lblWhite"></p:outputLabel>
<p:outputLabel value="#{mysqlmaven.lblPhone}"></p:outputLabel>
<p:inputText id="phoneId" label="#{mysqlmaven.lblPhone}" value="#{registrationBean.phone}"></p:inputText>
</h:panelGroup>
</h:panelGrid>
<h:panelGrid columns="2">
<h:panelGroup>
<p:outputLabel value="*" styleClass="lblRed"></p:outputLabel>
<p:outputLabel value="#{mysqlmaven.lblCountry}"></p:outputLabel>
<p:inputText id="countryId" label="#{mysqlmaven.lblCountry}" value="#{registrationBean.country}"></p:inputText>
</h:panelGroup>
</h:panelGrid>
<h:panelGrid columns="2">
<h:panelGroup>
<p:outputLabel value="*" styleClass="lblRed"></p:outputLabel>
<p:outputLabel value="#{mysqlmaven.lblState}"></p:outputLabel>
<p:inputText id="stateId" label="#{mysqlmaven.lblState}" value="#{registrationBean.state}"></p:inputText>
</h:panelGroup>
</h:panelGrid>
<h:panelGrid columns="2">
<h:panelGroup>
<p:outputLabel value="*" styleClass="lblRed"></p:outputLabel>
<p:outputLabel value="#{mysqlmaven.lblCity}"></p:outputLabel>
<p:inputText id="cityId" label="#{mysqlmaven.lblCity}" value="#{registrationBean.city}"></p:inputText>
</h:panelGroup>
</h:panelGrid>
<h:panelGrid columns="2">
<h:panelGroup>
<p:outputLabel value="*" styleClass="lblWhite"></p:outputLabel>
<p:outputLabel value="#{mysqlmaven.lblBloodGroup}"></p:outputLabel>
<p:inputText id="bloodGroupId" label="#{mysqlmaven.lblBloodGroup}" value="#{registrationBean.bloodGroup}"></p:inputText>
</h:panelGroup>
</h:panelGrid>
<h:panelGrid columns="2">
<h:panelGroup>
<p:outputLabel value="*" styleClass="lblWhite"></p:outputLabel>
<p:outputLabel value="#{mysqlmaven.lblHeight}"></p:outputLabel>
<p:inputText id="heightId" label="#{mysqlmaven.lblHeight}" value="#{registrationBean.height}"></p:inputText>
</h:panelGroup>
</h:panelGrid>
<h:panelGrid columns="2">
<h:panelGroup>
<p:outputLabel value="*" styleClass="lblWhite"></p:outputLabel>
<p:outputLabel value="#{mysqlmaven.lblHobbies}"></p:outputLabel>
<p:inputText id="hobbiesId" label="#{mysqlmaven.lblHobbies}" value="#{registrationBean.hobbies}"></p:inputText>
</h:panelGroup>
</h:panelGrid>
<h:panelGrid columns="2">
<h:panelGroup>
<p:outputLabel value="*" styleClass="lblWhite"></p:outputLabel>
<p:outputLabel value="#{mysqlmaven.lblPresentAddress}"></p:outputLabel>
<p:inputTextarea id="presentAddressId" label="#{mysqlmaven.lblPresentAddress}" value="#{registrationBean.presentAddress}" autoResize="false" style="resize:none;" maxlength="90" counter="counterOne" counterTemplate="{0} #{mysqlmaven.lblCharactersLeft}"></p:inputTextarea>
<h:outputText id="counterOne"></h:outputText>
</h:panelGroup>
</h:panelGrid>
<h:panelGrid columns="2">
<h:panelGroup>
<p:outputLabel value="*" styleClass="lblRed"></p:outputLabel>
<p:outputLabel value="#{mysqlmaven.lblPermanentAddress}"></p:outputLabel>
<p:inputTextarea id="perminentAddressId" label="#{mysqlmaven.lblPermanentAddress}" value="#{registrationBean.permanentAddress}" autoResize="false" style="resize:none;" maxlength="90" counter="counterTwo" counterTemplate="{0} #{mysqlmaven.lblCharactersLeft}"></p:inputTextarea>
<h:outputText id="counterTwo"></h:outputText>
</h:panelGroup>
</h:panelGrid>
</h:panelGrid> <h:panelGrid columns="2">
<p:commandButton id="submitId" value="Submit" title="Submit" action="#{registrationBean.submitRegistrationAction}"></p:commandButton>
<p:commandButton id="cancelId" value="Cancel" actionListener="#{registrationBean.cancelRegistrationAction}"></p:commandButton>
</h:panelGrid></td>
</tr>
</table>
</h:form>
</f:view>
</html>
How to apply custom width on primefaces components ?.
Screenshot:

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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"
xmlns:c="http://java.sun.com/jsp/jstl/core">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<h:outputStylesheet name="./css/default.css"/>
<h:outputStylesheet name="./css/cssLayout.css"/>
<title>Unicare</title>
</h:head>
<h:body >
<div class="center_content">
<ui:insert>
<center>
<h:form >
<p:panel id="panel" header="Sign-Up Form">
<p:messages globalOnly="true"/>
<h:panelGrid columns="1" cellpadding="5px" cellspacing="3px">
<p:outputLabel value="Name" />
<h:panelGrid columns="4" >
<p:inputText id="fname" value="#{registration.first_name}" required="true" requiredMessage="Enter First name" >
<p:watermark value="First Name" for="fname" />
</p:inputText>
<p:message for="fname" />
<p:inputText id="lname" value="#{registration.last_name}" required="true" requiredMessage="Enter Last name" >
<p:watermark value="Last Name" for="lname" />
</p:inputText>
<p:message for="lname" />
</h:panelGrid>
<p:outputLabel value="Username" />
<h:panelGrid columns="2" >
<p:inputText id="uname" value="#{registration.username}" required="true" requiredMessage="Enter Username" label="Username" >
<f:validateLength maximum="12" minimum="6" />
</p:inputText>
<p:message for="uname" />
</h:panelGrid>
<p:outputLabel value="Enter Password" />
<h:panelGrid columns="4" >
<p:password id="password1" value="#{registration.password1}" required="true" feedback="true" weakLabel="Password weak" strongLabel="Strong password" goodLabel="Good strength" maxlength="12" requiredMessage="Enter password" label="Password 1" >
<p:watermark value="Password" for="password1" />
<f:validateLength minimum="6" />
</p:password>
<p:message for="password1" />
<p:password id="password2" value="#{registration.password2}" required="true" requiredMessage="Enter Confirm password" label="Password 2">
<p:watermark value="Confirm Password" for="password2" />
<f:validateLength minimum="6" />
</p:password>
<p:message for="password2" />
</h:panelGrid>
<p:outputLabel value="Contact No" />
<h:panelGrid columns="3" >
<p:selectOneMenu style="width: 195px">
<f:selectItem itemLabel="Mobile" itemValue="1" />
<f:selectItem itemLabel="Work" itemValue="2" />
<f:selectItem itemLabel="Office" itemValue="3" />
<f:selectItem itemLabel="Work Fax" itemValue="4" />
</p:selectOneMenu>
<p:inputMask id="contact1" value="#{registration.contact1}" required="true" requiredMessage="Enter Contact No" mask="9999999999" >
</p:inputMask>
<p:message for="contact1" />
<p:selectOneMenu style="width: 195px">
<f:selectItem itemLabel="Work" itemValue="1" />
<f:selectItem itemLabel="Mobile" itemValue="2" />
<f:selectItem itemLabel="Office" itemValue="3" />
<f:selectItem itemLabel="Work Fax" itemValue="4" />
</p:selectOneMenu>
<p:inputMask value="#{registration.contact2}" id="contact2" mask="9999999999" >
</p:inputMask>
</h:panelGrid>
<p:outputLabel value="Enter E-mail" />
<h:panelGrid columns="3" >
<p:inputText id="email1" value="#{registration.e_mail1}" required="true" requiredMessage="Enter E-Mail " >
<p:watermark value="Personal " for="email1" />
</p:inputText>
<p:inputText id="email2" value="#{registration.e_mail2}">
<p:watermark value="Official" for="email2" />
</p:inputText>
<p:message for="email1" />
</h:panelGrid>
<p:outputLabel value="Employer Details" />
<h:panelGrid columns="4" >
<p:inputText id="emp1" value="#{registration.employeer}" required="true" requiredMessage="Enter Employeer Details" >
<p:watermark value="Employeer Name" for="emp1" />
</p:inputText>
<p:message for="emp1" />
<p:inputText id="emp2" value="#{registration.designation}" required="true" requiredMessage="Enter Designation">
<p:watermark value="Designation" for="emp2" />
</p:inputText>
<p:message for="emp2" />
</h:panelGrid>
<p:outputLabel value="Address Details" />
<h:panelGrid columns="4" >
<p:inputText id="address1" value="#{registration.street_address}" required="true" requiredMessage="Enter Street Address" >
<p:watermark value="Street Address * " for="address1" />
</p:inputText>
<p:message for="address1" />
<p:inputText id="address2" value="#{registration.state}" required="true" requiredMessage="Enter State Address" >
<p:watermark value="State" for="address2" />
</p:inputText>
<p:message for="address2" />
<p:selectOneMenu value="#{registration.country}" id="con" required="true" requiredMessage="Select Country" style="width: 195px" >
<f:selectItems itemLabel="#{registration.myList}" value="#{registration.myList}" />
</p:selectOneMenu>
<p:message for="con" />
<p:inputText id="address4" value="#{registration.pin_code}" required="true" requiredMessage=" Enter PIN Code" >
<p:watermark value="PIN Code" for="address4" />
</p:inputText>
<p:message for="address4" />
</h:panelGrid>
</h:panelGrid>
<center>
<p:commandButton ajax="false" id="log" value="Submit" action="#{registration.passcheck}" style="height: 40px;width: 100px;"/>
</center>
</p:panel>
</h:form>
</center>
</ui:insert>
<div id="bottom">
<ui:insert name="bottom">
<center>
<h:link value="Home" outcome="Home" />
</center>
</ui:insert>
</div>
</div>
</h:body>
</html>
output look like these ...check the image

In order to the columns to be the same size, there should only be one panelGrid (which will be converted to a single table). Note that the last columns needed to be grouped with a panelGroup so that 3 sets always remain
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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">
<f:view>
<h:head>
<title>Registration</title>
<f:loadBundle var="mysqlmaven" basename="com.uk.mysqlmaven.resources.mysqlmaven" />
<h:outputStylesheet name="style/mysqlmaven.css"></h:outputStylesheet>
</h:head>
<h:form id="registrationForm">
<h:panelGroup>
<h:messages id="registrationMessageId"></h:messages>
</h:panelGroup>
<h:panelGrid columns="3" cellpadding="2" frame="hsides" border="0">
<p:outputLabel value="*" styleClass="lblRed"></p:outputLabel>
<p:outputLabel value="FirstName" styleClass="customLblWidth150px"></p:outputLabel>
<p:inputText id="firstNameId" value="#{registrationBean.firstName}" styleClass="customTxtWidth150px"></p:inputText>
<p:outputLabel value="*" styleClass="lblWhite"></p:outputLabel>
<p:outputLabel value="MiddleName" styleClass="customLblWidth150px"></p:outputLabel>
<p:inputText id="middleNameId" value="#{registrationBean.middleName}" styleClass="customTxtWidth150px"></p:inputText>
<p:outputLabel value="*" styleClass="lblRed"></p:outputLabel>
<p:outputLabel value="#{mysqlmaven.lblLastName}"></p:outputLabel>
<p:inputText id="lastNameId" label="#{mysqlmaven.lblLastName}" value="#{registrationBean.lastName}"></p:inputText>
<p:outputLabel value="*" styleClass="lblRed"></p:outputLabel>
<p:outputLabel value="#{mysqlmaven.lblFathersOrGuardianName}"></p:outputLabel>
<p:inputText id="fathersOrGuardianNameId" label="#{mysqlmaven.lblFathersOrGuardianName}" value="#{registrationBean.fathersOrGuardianName}"></p:inputText>
<p:outputLabel value="*" styleClass="lblWhite"></p:outputLabel>
<p:outputLabel value="#{mysqlmaven.lblQualification}"></p:outputLabel>
<p:inputText id="qualificationId" label="#{mysqlmaven.lblQualification}" value="#{registrationBean.qualification}"></p:inputText>
<p:outputLabel value="*" styleClass="lblRed"></p:outputLabel>
<p:outputLabel value="#{mysqlmaven.lblDateOfBirth}"></p:outputLabel>
<p:calendar id="dateOfBirthId" label="#{mysqlmaven.lblDateOfBirth}" value="#{registrationBean.dateOfBirth}" pattern="dd-MMM-yyyy" showWeek="true" navigator="true" yearRange="c-100:c+0"></p:calendar>
<p:outputLabel value="*" styleClass="lblRed"></p:outputLabel>
<p:outputLabel value="#{mysqlmaven.lblPrimaryEmail}"></p:outputLabel>
<p:inputText id="primaryEmailId" label="#{mysqlmaven.lblPrimaryEmail}" value="#{registrationBean.primaryEmail}"></p:inputText>
<p:outputLabel value="*" styleClass="lblRed"></p:outputLabel>
<p:outputLabel value="#{mysqlmaven.lblMobile}"></p:outputLabel>
<p:inputText id="mobileId" label="#{mysqlmaven.lblMobile}" value="#{registrationBean.mobile}"></p:inputText>
<p:outputLabel value="*" styleClass="lblWhite"></p:outputLabel>
<p:outputLabel value="#{mysqlmaven.lblPhone}"></p:outputLabel>
<p:inputText id="phoneId" label="#{mysqlmaven.lblPhone}" value="#{registrationBean.phone}"></p:inputText>
<p:outputLabel value="*" styleClass="lblRed"></p:outputLabel>
<p:outputLabel value="#{mysqlmaven.lblCountry}"></p:outputLabel>
<p:inputText id="countryId" label="#{mysqlmaven.lblCountry}" value="#{registrationBean.country}"></p:inputText>
<p:outputLabel value="*" styleClass="lblRed"></p:outputLabel>
<p:outputLabel value="#{mysqlmaven.lblState}"></p:outputLabel>
<p:inputText id="stateId" label="#{mysqlmaven.lblState}" value="#{registrationBean.state}"></p:inputText>
<p:outputLabel value="*" styleClass="lblRed"></p:outputLabel>
<p:outputLabel value="#{mysqlmaven.lblCity}"></p:outputLabel>
<p:inputText id="cityId" label="#{mysqlmaven.lblCity}" value="#{registrationBean.city}"></p:inputText>
<p:outputLabel value="*" styleClass="lblWhite"></p:outputLabel>
<p:outputLabel value="#{mysqlmaven.lblBloodGroup}"></p:outputLabel>
<p:inputText id="bloodGroupId" label="#{mysqlmaven.lblBloodGroup}" value="#{registrationBean.bloodGroup}"></p:inputText>
<p:outputLabel value="*" styleClass="lblWhite"></p:outputLabel>
<p:outputLabel value="#{mysqlmaven.lblHeight}"></p:outputLabel>
<p:inputText id="heightId" label="#{mysqlmaven.lblHeight}" value="#{registrationBean.height}"></p:inputText>
<p:outputLabel value="*" styleClass="lblWhite"></p:outputLabel>
<p:outputLabel value="#{mysqlmaven.lblHobbies}"></p:outputLabel>
<p:inputText id="hobbiesId" label="#{mysqlmaven.lblHobbies}" value="#{registrationBean.hobbies}"></p:inputText>
<p:outputLabel value="*" styleClass="lblWhite"></p:outputLabel>
<p:outputLabel value="#{mysqlmaven.lblPresentAddress}"></p:outputLabel>
<h:panelGroup>
<p:inputTextarea id="presentAddressId" label="#{mysqlmaven.lblPresentAddress}" value="#{registrationBean.presentAddress}" autoResize="false" style="resize:none;" maxlength="90" counter="counterOne" counterTemplate="{0} #{mysqlmaven.lblCharactersLeft}"></p:inputTextarea>
<h:outputText id="counterOne"></h:outputText>
</h:panelGroup>
<p:outputLabel value="*" styleClass="lblRed"></p:outputLabel>
<p:outputLabel value="#{mysqlmaven.lblPermanentAddress}"></p:outputLabel>
<h:panelGroup>
<p:inputTextarea id="perminentAddressId" label="#{mysqlmaven.lblPermanentAddress}" value="#{registrationBean.permanentAddress}" autoResize="false" style="resize:none;" maxlength="90" counter="counterTwo" counterTemplate="{0} #{mysqlmaven.lblCharactersLeft}"></p:inputTextarea>
<h:outputText id="counterTwo"></h:outputText>
</h:panelGroup>
</h:panelGrid>
<h:panelGrid columns="2">
<p:commandButton id="submitId" value="Submit" title="Submit" action="#{registrationBean.submitRegistrationAction}"></p:commandButton>
<p:commandButton id="cancelId" value="Cancel" actionListener="#{registrationBean.cancelRegistrationAction}"></p:commandButton>
</h:panelGrid>
</h:form>
</f:view>
</html>

Try This
input.customTxtWidth150px{
width:150px !important;
}
label.customLblWidth150px {
width: 150px !important;
}

edit style of jsf component primefaces

I have this page :
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core">
<body>
<ui:composition template="./template_admin.xhtml">
<ui:define name="tohead">
</ui:define>
<ui:define name="content">
<p:panel header="Edition d'une commande" style="height: 490px;" id="panel" >
<p:messages id="msgs"/>
<h:panelGrid columns="3" style="float:left;" columnClasses="column" cellpadding="5">
<h:outputLabel for="idd" value="Id : " />
<p:inputText disabled="true" value="#{editCommandController.myCom.id}" id="idd" required="true" requiredMessage="veuillez saisir un nom" label="Nom" />
<p:message for="idd" display="icon"/>
<h:outputLabel for="dteenvoi" value="Date d'envoi : " />
<p:inputText disabled="true" id="dteenvoi" value="#{editCommandController.myCom.dateEnvoi}" required="true" requiredMessage="veuillez saisir un prénom" label="Prénom" />
<p:message for="dteenvoi" display="icon"/>
<h:outputLabel for="division" value="Date de livraison recommandée : " />
<p:inputText disabled="true" id="division" value="#{editCommandController.myCom.dateLivraisonRecommande}" />
<p:message for="division" display="icon"/>
<h:outputLabel for="poste" value="Nombre de page : " />
<p:inputText id="poste" disabled="true" value="#{editCommandController.myCom.nbrePage}" />
<p:message for="poste" display="icon"/>
<h:outputLabel for="email" value="Nombre d'exemplaire : " />
<p:inputText id="email" disabled="true" value="#{editCommandController.myCom.nbreExemplaire}" />
<p:message for="email" display="icon"/>
<h:outputLabel for="autres" value="Type d'impression : " />
<p:inputText id="autres" disabled="true" value="#{editCommandController.myCom.typeImpression}" />
<p:message for="autres" display="icon"/>
<h:outputLabel for="identifiant" value="Observation : " />
<p:inputTextarea id="identifiant" disabled="true" value="#{editCommandController.myCom.observation}" required="true" validator="#{addUserController.validateIdentifiant}" requiredMessage="veuillez saisir un identifiant" label="Identifiant" />
<p:message for="identifiant" display="icon"/>
<h:outputLabel for="dec" value="Decision : " />
<p:selectOneMenu id="dec" value="#{editCommandController.myCom.decision}" >
<f:selectItems value="#{editCommandController.decisions}" />
<p:ajax update="etat gridContainer :myform:alors" event="change" />
</p:selectOneMenu>
<p:message for="dec" display="icon"/>
<h:outputLabel for="etat" value="Etat : " />
<p:selectOneMenu id="etat" value="#{editCommandController.myCom.etat}" disabled="#{editCommandController.myCom.decision eq 'rejettée'}" >
<f:selectItems value="#{editCommandController.etats}" />
</p:selectOneMenu>
<p:message for="etat" display="icon"/>
<h:outputLabel for="calen" value="Date de Livraison réelle: *" />
<p:calendar label="Date de Livraison reelle" id="calen" showOn="button" effect="slide" value="#{editCommandController.myCom.dateLivraisonReelle}" pattern="MM/dd/yyyy HH:mm" >
</p:calendar>
<p:message for="calen" id="msgSurname4" display="icon"/>
</h:panelGrid>
<p:outputPanel id="gridContainer" layoyut="block" >
<h:panelGrid id="alors" rendered="#{editCommandController.myCom.decision ne 'rejettée'}" >
<p:dataTable id="cars" style="width: 80px;" var="car" value="#{editCommandController.pdm}" paginator="true" rows="10"
selection="#{editCommandController.selectedPapier}" selectionMode="single" >
<p:ajax event="rowSelect" listener="#{editCommandController.onRowSelect()}"
update=":myform:jesuis" />
<f:facet name="header">
RadioButton Based Selection
</f:facet>
<p:column headerText="libelle">
#{car.libelle}
</p:column>
<p:column headerText="format">
#{car.format}
</p:column>
<p:column headerText="stock" >
#{car.stock}
</p:column>
</p:dataTable>
<h:outputText id="jesuis" value=" c est la papier : #{editCommandController.selectedPapier.libelle}" />
<h:panelGrid columns="2" cellpadding="5" style="margin-top: 22px;">
<h:outputLabel value="Reliure :" for="city" />
<p:selectOneMenu id="city" value="#{addPapierController.choixReliure}">
<f:selectItem itemLabel="choisir reliure" itemValue="" />
<f:selectItems value="#{addPapierController.libelleReliures}" />
<p:ajax
listener="#{addPapierController.handleCityChange}" />
</p:selectOneMenu>
</h:panelGrid>
</h:panelGrid>
</p:outputPanel>
<h:panelGrid columns="2" style="float:none;display: block;" >
<p:commandButton value="Editer" ajax="false" action="#{editCommandController.updateCommand()}" update="panel" ></p:commandButton>
<p:commandButton value="Annuler" immediate="true" action="commandesUser" ajax="false" ></p:commandButton>
</h:panelGrid>
</p:panel>
</ui:define>
</ui:composition>
</body>
</html>
I would like to divide the panel into three part :
the fisrt in the left of the page
the second in the right of the page
and the third in the bottom of the page
I managed to put the first and the second but the third part is just below the second part, I would like to put it only in the bottom

Your first panel is floated left by float:left;. So anything which comes after it in the DOM will just end up on the right side of it as long as there's at least some vertical space for it. If you want the element to escape this float and thus end up in a new line, then you need to clear the float. This isn't to be done by float:none; as you attempted:
<h:panelGrid columns="2" style="float:none;display: block;" >
but instead by clear:left;:
<h:panelGrid columns="2" style="clear:left;" >
Note that I removed display:block; as the HTML <table> (as generated by <h:panelGrid> is already a block level element.
Unrelated to the concrete problem, this has very little to do with JSF. It's merely a HTML code generator. In future CSS-related questions it'd be more helpful for CSS experts if you ignore the JSF part and concentrate on its generated HTML output only (which you can find by rightclick, View Source in the webbrowser) in the question. Once you get the answer from the CSS experts, all you need to do is to trackback the responsible JSF component and change it accordingly so that you get the desired generated HTML output.

Develop Reference

r css asp.net wordpress firebase qt symfony nginx http apache-flex

Page long stretched on internet explorer 8/9 with Primefaces - css

Related

set selected value to bean to respective input fields

Columns alignment in in h:panelGrid

Align a PanelGrid which is in another PanelGrid

How to change width of Primefaces components?

edit style of jsf component primefaces

Categories

Resources