I use a menubar from primefaces
<p:toolbar style="margin:20px 0px">
<f:facet name="left">
<p:outputLabel value="#{loginBean.fullname}" />
</f:facet>
<f:facet name="right">
<p:inputText style="margin-right:10px" placeholder="Search" disabled="true"/>
<p:themeSwitcher effectSpeed="normal" effect="fade" style="width:165px; margin-right:10px;" id="defaultSwitcher" value="#{themeSwitcherBean.theme}">
<f:selectItem itemLabel="Choose Theme" itemValue="" />
<f:selectItems value="#{themeSwitcherBean.themes}" />
<p:ajax global="false" listener="#{themeSwitcherBean.saveTheme}" />
</p:themeSwitcher>
<p:commandButton action="#{loginBean.logout}" title="Log Out" style="width:36px; height:20px" icon="ui-icon-power" value="" ajax="false"></p:commandButton>
</f:facet>
</p:toolbar>
which renders to the right side
It disturb my eye that the alignment fro mthe search-box and the drop-down-box are not at the same height.
You know how i can align them correctly?
You need to fix the drop-down-box appearance using with CSS. Try to add "margin-top" or "padding-top" property to the p:themeSwitcher style arrtibute.
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;
}
I'm trying to change the css of a basic panelgrid.
Basically I want the text of the right column on the right. This doesn't work
<p:panelGrid columns="2" style="height: 220px;width:100%;">
<f:facet name="header">
<h:outputText value="Car" />
</f:facet>
<h:outputText value="Colour:" />
<h:outputText style="text-align: right;" value="blue" />
<h:outputText value="Brand:" />
<h:outputText style="text-align: right;" value="Ferrari" />
</p:panelGrid>
Is there any way to change it ?
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;
}
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?
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.