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 !!!!
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]);
}
}
I have a xhtml page with two tables that are set css style:
<o:dataTable id="productTable" value="#{produkty.produkty}" var="p"
rowKey="#{p.product.id}" pageSize="10" styleClass="dataTable"
style="line-height: 15px; font-size: 12px; table-layout: fixed;">
<o:columnResizing resizeHandleWidth="10px" minColWidth="50px" />
<o:multipleRowSelection rowDatas="#{produkty.SProdukty}"
style="background: #a4aec5; color: white;" mouseSupport="false"
keyboardSupport="false" />
<!-- OPIS -->
<o:column header="Opis" id="opisCol1"
sortingExpression="#{p.product.opis}"
style="text-align: left; padding-right: 5px; padding-left: 5px; ">
<f:facet name="subHeader">
<o:inputTextFilter />
</f:facet>
<!-- <h:outputText value="#{p.product.opis}" /> -->
<o:hintLabel value="#{p.product.opis}" hintTimeout="0"
style="width: 350px; margin-right: 10px; color: black; border-color: red;" />
</o:column>
</o:dataTable>
the style used in <o:hintLabel> and <o:dataTable> tags set only when I press a button:
addBean method looks like this:
public void addBean() {
add();
produktyP.chainReaction(this);
}
which has nothing in common with the table, but it's reloading page, why onle when i press this button css styles set? In addition, I will say that the site is in tag. I use OpenFaces lib.
index.xhtml source:
<?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:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:o="http://openfaces.org/">
<h:head>
<title>PIR Kreator Ofert</title>
<script src="/WEB-INF/resources/script.js" type="text/javascript"></script>
<link rel="stylesheet" href="resources/style.css" type="text/css"/>
</h:head>
<h:body>
<h:form id="form">
<h:panelGrid columns="2">
<h:outputLink value="index.xhtml"><h:graphicImage id="logo" alt="pir logo" url="/images/logo.png"/></h:outputLink>
<h1>Kreator Ofert</h1>
</h:panelGrid>
<o:tabbedPane>
<o:subPanel caption="Nagłówek">
<ui:include src="index_core/naglowek.xhtml" />
</o:subPanel>
<o:subPanel caption="Produkty">
<ui:include src="index_core/produkty.xhtml" />
</o:subPanel>
</o:tabbedPane>
<h:panelGrid columns="2">
Sortowanie Elementów:
<o:selectBooleanCheckbox value="#{pdf.sortContent}" />
</h:panelGrid>
<h:panelGrid columns="5">
Nazwa pliku:
<o:inputText value="#{pdf.fileName}" />
<o:commandButton id="printButton" value="Drukuj"
actionListener="#{pdf.printt}" />
<o:commandButton id="initializePDFButton" value="Reset"
action="#{pdf.initPDF}" />
<o:commandLink value="Download PDF" action="#{pdf.downloadPDF}"
target="_blank" />
</h:panelGrid>
<!-- AJAX -->
<ui:include src="ajax_core/ajax.xhtml" />
</h:form>
</h:body>
</html>
produkty.xhtml source:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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:o="http://openfaces.org/">
<h:panelGrid columns="2">
<h:panelGroup layout="block" id="produktMenu">
<o:dataTable id="productTable" value="#{produkty.produkty}" var="p"
rowKey="#{p.product.id}" pageSize="10" styleClass="dataTable"
>
<o:columnResizing resizeHandleWidth="10px" minColWidth="50px" />
<o:multipleRowSelection rowDatas="#{produkty.SProdukty}"
style="background: #a4aec5; color: white;" mouseSupport="false"
keyboardSupport="false" />
<o:columnReordering />
<f:facet name="columnMenu">
<o:columnMenu />
</f:facet>
<f:facet name="header">
<h:outputText value="Tabela Produktów" />
</f:facet>
<!-- SELECTION -->
<o:selectionColumn sortable="true" header="Selection"
style="width: 5%;" onclick="O$('form:addProduct').run()">
<f:facet name="header">
<o:selectAllCheckbox style="width: 10px;" />
</f:facet>
</o:selectionColumn>
<!-- KATEGORIA -->
<o:column header="Kategoria"
sortingExpression="#{p.product.kategoria}">
<f:facet name="subHeader">
<o:dropDownFieldFilter maxlength="4" customValueAllowed="false"
style="width: 40px;" />
</f:facet>
<h:outputText value="#{p.product.kategoria}" />
</o:column>
<!-- ILOSC -->
<o:column header="Ilość">
<o:spinner id="ilosc" value="#{p.ilosc}" minValue="1"
maxValue="100" onclick="O$('form:addProduct').run()"/>
</o:column>
<!-- SYMBOL -->
<o:column header="Symbol" id="symbolCol1"
sortingExpression="#{p.product.symbol}" style="width: 100px">
<f:facet name="subHeader">
<o:inputTextFilter />
</f:facet>
<h:outputText value="#{p.product.symbol}" />
</o:column>
<!-- OPIS -->
<o:column header="Opis" id="opisCol1"
sortingExpression="#{p.product.opis}"
style="text-align: left; padding-right: 5px; padding-left: 5px; ">
<f:facet name="subHeader">
<o:inputTextFilter />
</f:facet>
<!-- <h:outputText value="#{p.product.opis}" /> -->
<o:hintLabel value="#{p.product.opis}" hintTimeout="0"
style="width: 350px; margin-right: 10px; color: black; border-color: red;" />
</o:column>
<!-- CENA -->
<o:column header="Cena" id="cenaCol1"
sortingExpression="#{p.product.cena}" style="width: 55px;">
<h:outputText value="#{p.product.cena}€" />
</o:column>
<!-- PAGINATOR -->
<f:facet name="below">
<o:dataTablePaginator id="paginator" firstText="Pierwsza"
lastText="Ostatnia" nextText="Następna" previousText="Poprzednia"
pageNumberPrefix="Strona" pageCountPreposition="z" />
</f:facet>
<f:facet name="footer">
<o:commandButton value="Odśwież" type="button"
onclick="O$('form:addProduct').run()" />
</f:facet>
</o:dataTable>
</h:panelGroup>
</h:panelGrid>
</ui:composition>
I use DOCTYPE on both pages, because when only index.xhtml has it, Tomcat gives me:
HTTP Status 500 - /index.xhtml #28,51 <ui:include src="index_core/produkty.xhtml"> Invalid path : index_core/produkty.xhtml
another thing, when I want to add css file by <h:outputStylesheet library="css" name="style.css" /> or <link rel="stylesheet" href="resources/style.css" type="text/css"/> tomcat gives me java.lang.NoClassDefFoundError: javax/servlet/jsp/jstl/core/Config exception, I add jstl.jar lib to Tomcat/lib and nothing helps.
It works on IE olny, why?
In my JSF web application I've inserted a simple TreeTable.
Where can I set up distance between left border and expanded child's icon?
I want this distance to be bigger when new level is expanded.
EDIT:
<?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:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:f="http://java.sun.com/jsf/core">
<h:head>
<title>Facelet Title</title>
<link rel="stylesheet" type="text/css" href="css/treetable.css" />
<style type="text/css">
.ui-treetable .ui-treetable-indent {
float: right;
height: 0px;
width: 0px;
}
</style>
</h:head>
<h:body>
<h:form id="form">
<p:treeTable value="#{newJSFManagedBean.docCon.root}" var="document"
selection="#{newJSFManagedBean.docCon.selectedNode}" selectionMode="single">
<f:facet name="header">
Single Selection
</f:facet>
<p:column style="width:150px">
<f:facet name="header">
Name
</f:facet>
<h:outputText value="#{document.name}" />
</p:column>
<p:column style="width:100px">
<f:facet name="header">
Size
</f:facet>
<h:outputText value="#{document.size}" />
</p:column>
<p:column style="width:100px">
<f:facet name="header">
Type
</f:facet>
<h:outputText value="#{document.type}" />
</p:column>
<f:facet name="footer">
<p:commandButton id="singleBtn" value="View" icon="ui-icon-search"
update=":form:documentPanel" oncomplete="documentDialog.show()"/>
</f:facet>
</p:treeTable>
<p:dialog id="dialog" header="Document Detail" showEffect="fade" widgetVar="documentDialog" modal="true">
<p:outputPanel id="documentPanel">
<h:panelGrid columns="2" cellpadding="5" rendered="#{not empty newJSFManagedBean.docCon.selectedNode}">
<h:outputLabel for="name" value="Name: " />
<h:outputText id="name" value="#{newJSFManagedBean.docCon.selectedNode.data.name}" style="font-weight:bold" />
<h:outputLabel for="size" value="Size: " />
<h:outputText id="size" value="#{newJSFManagedBean.docCon.selectedNode.data.size}" style="font-weight:bold" />
<h:outputLabel for="type" value="Type " />
<h:outputText id="type" value="#{newJSFManagedBean.docCon.selectedNode.data.type}" style="font-weight:bold" />
</h:panelGrid>
</p:outputPanel>
</p:dialog>
</h:form>
<br /><br />
</h:body>
</html>
You need to create your own css and override the ui-treetable-indent css property originaly defined as :
.ui-treetable .ui-treetable-indent {
float: left;
height: 16px;
width: 16px;
}
The simple way is to include your own stylesheet with h:outputStylesheet or <link rel="stylesheet">.
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.