I create page and use data Grid there:
<?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:p="http://primefaces.org/ui">
<h:head>
<h:link rel="stylesheet" type="text/css" href="mystyle.css"></h:link>
<title>Prototype</title>
</h:head>
<h:body>
<h3>Dashboard prototype</h3>
<h:form>
<p:dataGrid id = "grid"
value="#{dashboardView.users}"
var="user"
columns="#{dashboardView.columns}"
styleClass="gridClass">
<p:column styleClass="gridClass">
<p:panel header="#{user.user.displayName}"
styleClass="gridClass">
<p:dataGrid value="#{user.issues}"
var="issue"
columns="1">
<p:panel header="#{issue.key}">
"#{issue.summary}"
</p:panel>
</p:dataGrid>
</p:panel>
</p:column>
</p:dataGrid>
<p:commandButton value="rrr"
actionListener="#{dashboardView.button}"
update="grid">
</p:commandButton>
</h:form>
</h:body>
</html>
And CSS:
.gridClass {
vertical-align: top;
text-align: start;
}
Panels inside First DataGrid alligns on center, but I want it to allign on top.
How can I do it?
Thanks!
You can solve by using jquery selector, which is shown below.
<script>
$(document).ready(function() {
$(".panelOnTopClass").parent().css("vertical-align", "top");
$(".panelOnTopClass").parent().css("height", "300px");
});
</script>
<h:form id="form">
<p:dataGrid var="car" value="#{dataGridView.cars}" columns="3"
rows="12" paginator="true" id="cars"
paginatorTemplate="{CurrentPageReport}
{FirstPageLink}
{PreviousPageLink}
{PageLinks}
{NextPageLink}
{LastPageLink}
{RowsPerPageDropdown}"
rowsPerPageTemplate="6,12,16"
styleClass="gridClass">
<f:facet name="header">
Cars for Sale
</f:facet>
<p:panel header="#{car.id}" styleClass="panelOnTopClass">
<h:panelGrid columns="1" style="width:100%">
<p:graphicImage name="demo/images/car/#{car.brand}.gif"/>
<h:outputText value="#{car.year}" />
</h:panelGrid>
</p:panel>
</p:dataGrid>
</h:form>
Related
When I use stickyHeader on a datatable inside of a layoutUnit the headers are displayed twice, with the second header slightly offset vertically and horizontally. When I use the same table not in a layoutUnit it displays correctly. When I scroll down and the header sticks to the top it displays correctly. I've tried examining the generated html and css but am unable to fix it.
Using Primefaces 6.1.
<?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">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<h:outputStylesheet library="css" name="primefaces.css"/>
</h:head>
<p:layout id="lo1">
<p:layoutUnit id="lu1" position="center">
<p:dataTable value="#{simpleController.simpleObjects}" var="simpleObject" stickyHeader="true">
<p:column headerText="attr1">
<p:outputLabel value="#{simpleObject.attr1}"/>
</p:column>
<p:column headerText="attr2">
<p:outputLabel value="#{simpleObject.attr2}"/>
</p:column>
<p:column headerText="attr3">
<p:outputLabel value="#{simpleObject.attr3}"/>
</p:column>
</p:dataTable>
</p:layoutUnit>
</p:layout>
</html>
And this is the same table but not in a layoutUnit
<?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">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<h:outputStylesheet library="css" name="primefaces.css"/>
</h:head>
<p:dataTable value="#{simpleController.simpleObjects}" var="simpleObject" stickyHeader="true">
<p:column headerText="attr1">
<p:outputLabel value="#{simpleObject.attr1}"/>
</p:column>
<p:column headerText="attr2">
<p:outputLabel value="#{simpleObject.attr2}"/>
</p:column>
<p:column headerText="attr3">
<p:outputLabel value="#{simpleObject.attr3}"/>
</p:column>
</p:dataTable>
</html>
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 !!!!
This question already has answers here:
How do I override default PrimeFaces CSS with custom styles?
(5 answers)
Closed 8 years ago.
I'm using facelets and I have the following layout 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:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="http://maps.google.com/maps/api/js?sensor=false"
type="text/javascript"></script>
<title><ui:insert name="title" /></title>
<link href="../css/cssmenu/styles.css" rel="stylesheet" type="text/css"/>
</h:head>
<h:body>
<div id="layout">
<table>
<tr>
<td height="500" valign="top">
<div id="menu">
<ui:include src="menu.xhtml" />
</div>
</td>
<td>
<div id="content">
<ui:insert name="content">
</ui:insert>
</div>
</td>
</tr>
</table>
</div>
</h:body>
</html>
Also my menu.xhtml page is the following:
<!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">
<h:body>
<h:form id="menuForm">
<div id="menuLateral">
<p:growl id="messages" autoUpdate="true" showDetail="true" />
<p:panelMenu style="width:200px" id="panelMenu">
<p:submenu label="Incidentes">
<p:menuitem value="#{menuController.test}" action="#{menuController.save}"
ajax="true" update="messages"
icon="ui-icon-disk" />
</p:submenu>
<p:submenu label="Non-Ajax Menuitem">
<p:menuitem value="Delete" ajax="false" icon="ui-icon-close" />
</p:submenu>
<p:separator />
<p:submenu label="Navigations">
<p:submenu label="Links" icon="ui-icon-extlink">
<p:submenu label="PrimeFaces" icon="ui-icon-heart">
<p:menuitem value="Home" url="http://www.primefaces.org"
icon="ui-icon-home" />
<p:menuitem value="Docs"
url="http://www.primefaces.org/documentation.html"
icon="ui-icon-document" />
<p:menuitem value="Download"
url="http://www.primefaces.org/downloads.html"
icon="ui-icon-arrowthick-1-s" />
<p:menuitem value="Support"
url="http://www.primefaces.org/support.html"
icon="ui-icon-wrench" />
</p:submenu>
</p:submenu>
<p:menuitem value="Mobile" icon="ui-icon-signal" />
</p:submenu>
</p:panelMenu>
</div>
</h:form>
</h:body>
</html>
What I want is to make my primefaces menu to look like this one:
http://cssmenumaker.com/builder/1442641 (or anyone actually, its just an example)
However im not sure what my css stylesheet should contain or what to do to accomplish it. I will deeply appreciate your suggestions.
Override Primefaces 4.0 CSS
Step 1 : You just override css file in primefaces 4.0
<h:outputStylesheet href="../css/layout.css" />
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">.