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.
Related
I am working on a code not written by me, I know they use PrimeFaces.
I am noticing that there are labels inside some fields structured by .xhtml files, when a long text is inserted they are no longer able to display the all content and a down arrow has been created but does not allow the entire text to be displayed in any case as it is not clickable.
I would like to understand the most optimal way to display the entire text of the label.
Here an example of visualization Test
The piece of code refer to that visualization:
code_test
Here part of the code that display and fill the fields.
<ui:composition
xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui"
xmlns:c="http://java.sun.com/jstl/core"
<ui:decorate template="/WEB-INF/templates/contentHeader.xhtml">
<ui:param name="name" value="personaldata.name" />
<ui:param name="desc" value="#{templateHandler.getCustomizedLocaleKey(voucherWizard.lraId,'step.personaldata.insert.desc')}" />
</ui:decorate>
<ui:param name="buttons" value=":wizard:wizardButtons"/>
<!-- <p:remoteCommand autoRun="true" name="reloadCommand" action="#{wizardPersonalDataBean.reload}" partialSubmit="true" /> -->
<p:panelGrid layout="grid" columns="3" styleClass="ui-panelgrid-blank form-group" id="idDocumentGrid" rendered="#{wizardPersonalDataBean.viewableIdDocument}">
<!-- CASI NON SPID: MI SERVE LA TRIPLA TIPO-STATO-NR -->
<c:if test="#{!wizardPersonalDataBean.italianTaxCodeMandatory}">
<!-- TIPO DOCUMENTO ID -->
<h:panelGroup styleClass="md-inputfield">
<p:selectOneMenu
id="idDocumentType"
label="idDocumentType"
value="#{wizardPersonalDataBean.data.idDocumentType.data}"
validator="#{wizardPersonalDataBean.validateIdType}"
panelStyle="width:180px"
layout="responsive"
converter="validIdDocumentTypeConverter"
effect="fade"
disabled="#{!wizardPersonalDataBean.data.idDocumentType.modifiable}"
>
<f:selectItem itemLabel="#{msg['personaldata.lbl.iddoctype']}" noSelectionOption="true" />
<f:selectItems value="#{wizardPersonalDataBean.validIdDocumentTypes}" var="validIdDocumentType" itemValue="#{validIdDocumentType}" itemLabel="#{msg['personaldata.lbl.iddoctype.'+=validIdDocumentType]}"/>
<!-- <f:selectItem itemLabel="#{msg['personaldata.lbl.iddoctype.TAX_CODE']}" itemValue="TAX_CODE" />
<f:selectItem itemLabel="#{msg['personaldata.lbl.iddoctype.PASSPORT']}" itemValue="PASSPORT" />
<f:selectItem itemLabel="#{msg['personaldata.lbl.iddoctype.PERSONAL_NUMBER']}" itemValue="PERSONAL_NUMBER" />
<f:selectItem itemLabel="#{msg['personaldata.lbl.iddoctype.NATIONAL_IDENTITY_CARD']}" itemValue="NATIONAL_IDENTITY_CARD" />
-->
<p:ajax
event="change" global="false"
update="idDocumentGrid gender birthGrid firstname lastname"
listener="#{wizardPersonalDataBean.handleIdDocumentTypeChange}"
/>
</p:selectOneMenu>
<p:outputLabel value="#{msg['personaldata.lbl.iddoctype']}" />
</h:panelGroup>
<!-- STATO DOC ID -->
<h:panelGroup styleClass="md-inputfield">
<p:selectOneMenu
id="idDocumentCountry"
label="idDocumentCountry"
value="#{wizardPersonalDataBean.data.idDocumentCountry.data}"
validator="#{wizardPersonalDataBean.validateIdCountry}"
panelStyle="width:180px"
layout="responsive"
effect="fade"
filter="true"
filterMatchMode="contains"
converter="countryConverter"
var="c"
disabled="#{!wizardPersonalDataBean.data.idDocumentCountry.modifiable}"
>
<f:selectItem
itemLabel="#{msg['personaldata.lbl.iddoccountry']}"
noSelectionOption="true"
itemDisabled="#{wizardPersonalDataBean.idDocumentCountries.size() le 1}"
/>
<f:selectItems
value="#{wizardPersonalDataBean.idDocumentCountries}"
var="country"
itemLabel="#{country.getLocalizedName(appLanguage.languageCode)} (#{country.codeIso3166_2})"
itemValue="#{country}"
/>
<p:column>
<h:outputText value="#{c.codeIso3166_2}" />
</p:column>
<p:column>
<h:outputText value="#{c.getLocalizedName(appLanguage.languageCode)}" />
</p:column>
<p:ajax
event="change"
update="idDocumentNr idDocumentGrid gender birthGrid firstname lastname"
listener="#{wizardPersonalDataBean.handleIdDocumentCountryChange}"
/>
</p:selectOneMenu>
<p:outputLabel value="#{msg['personaldata.lbl.iddoccountry']}" />
</h:panelGroup>
HERE for example is the specific case of type of document, this is refered in our displayed case by Tax code, how can I add an option for ensure a display mode for my (LONG) string?
<!-- TIPO DOCUMENTO ID -->
<h:panelGroup styleClass="md-inputfield">
<p:selectOneMenu
id="idDocumentType"
label="idDocumentType"
value="#{wizardPersonalDataBean.data.idDocumentType.data}"
validator="#{wizardPersonalDataBean.validateIdType}"
panelStyle="width:180px"
layout="responsive"
converter="validIdDocumentTypeConverter"
effect="fade"
disabled="#{!wizardPersonalDataBean.data.idDocumentType.modifiable}"
>
HERE there is the related .css class that is called refer to label item:
.md-inputfield {
display: block;
position:relative;
input:focus ~ label,
input.ui-state-filled ~ label,
textarea:focus ~ label,
textarea.ui-state-filled ~ label,
.inputfield-wrapper ~ label {
top:-20px;
font-size:12px;
color:$primaryColor;
}
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]);
}
}
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 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;
}
I have this problem :
here is the code :
<p:panelGrid styleClass="newArticlePanelGrid" >
<!-- __________________________________________row1________________________________________________ -->
<p:row>
<p:column>
<h:outputLabel value="Designation : " />
</p:column>
<p:column colspan="3" >
<p:inputText id="new-article-designation" style="width: 449px;"
value="#{articlesMB.article.designation}" required="true"
requiredMessage="designation requise" />
</p:column>
</p:row>
<p:row>
<p:column />
<p:column colspan="3" >
<p:message id="for-new-article-designation"
for="new-article-designation" display="text" />
</p:column>
</p:row>
<!-- __________________________________________row2________________________________________________ -->
<p:row>
<p:column>
<h:outputLabel value="Type : " />
</p:column>
<p:column>
<p:selectOneMenu id="new-article-typeggg" required="true"
requiredMessage="type requis" converter="#{typeConverter}"
style="width:100%" value="#{articlesMB.article.type}">
<!-- <f:selectItem itemLabel="Selectionner Type" itemValue="" />-->
<f:selectItems value="#{articlesMB.listTypes}" var="v"
itemLabel="#{v.libelle}" itemValue="#{v}" />
</p:selectOneMenu>
</p:column>
<p:column>
<h:outputLabel value="Unité : " />
</p:column>
<p:column>
<p:selectOneMenu id="new-article-unite" required="true"
widgetVar="uniteselect" requiredMessage="unité requise"
converter="#{uniteConverter}" style="width:100%"
value="#{articlesMB.article.unite}">
<!-- <f:selectItem itemLabel="Selectionner Unite" itemValue="" /> -->
<f:selectItems value="#{articlesMB.listUnites}" var="v"
itemLabel="#{v.libelle}" itemValue="#{v}" />
</p:selectOneMenu>
</p:column>
</p:row>
<p:row>
<p:column />
<p:column>
I don't know what I should do to reolve this problem : I tested width:100% but as you see it doesn't change
how can I resolve that ?
thank you in advance
The problem come from style="100%", it only change selectonemenu's width, you should set width for label inside selectonemenu(in this situation):
<style type="text/css">
.ui-selectonemenu-label{
width:100% !important;
}
</style>
If you want set all selectonemenu:
<style type="text/css">
.ui-selectonemenu-label{
width:100% !important;
}
.ui-selectonemenu{
width:100% !important;
}
</style>
for more general, you can include in css file.
See also: What is the JSF resource library for and how should it be used?