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" />
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>
I'm working with the PrimeFaces file upload button and it works as intended but my cursor is able to click it while not in the bounds of the button. This is possible specifically if the cursor is both
below the upper bound of the button
to the left of the right bound of the button.
There does appear to be some lower bound to this clickable area outside of the button but there is not a clear marker like there is for the upper and right bounds.
I am currently using PrimeFaces 6.0, and my WebLogic server is version 12.1.2.0. There are also no errors being printed to the console.
Are there errors in my xhtml that is causing it or is it related to an issue with PrimeFaces? Would it be possible to change the clickable area with CSS without changing the actual button size?
XHTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui" template="/templates/main.xhtml">
<h:head></h:head>
<ui:define name="pagebody">
<h:outputScript library="javascript" name="script.js" />
<h:body>
<p:ajaxStatus onstart="PF('statusDialog').show()"
onsuccess="PF('statusDialog').hide()" />
<p:dialog widgetVar="statusDialog" modal="true" draggable="false"
closable="false" resizable="false" showHeader="false">
<p:graphicImage value="/resources/images/ajax-loader.gif" />
</p:dialog>
<h:form id="uploadform" prependId="false"
enctype="multipart/form-data"
onkeypress="return event.keyCode != 13;">
<p:focus />
<p:outputPanel id="container">
<center>
<h2>File Upload</h2>
</center>
<br />
<center>
<font color="red"> <b><p:messages id="messages"
styleClass="error" /></b>
</font>
</center>
<center>
<p:fileUpload fileUploadListener="#{uploadBean.handleFileUpload}" mode="advanced"
update="submitButton" auto="true" allowTypes="/(\.|\/)(csv|xlsx)$/" />
<p:commandButton value="Submit" id="submitButton" actionListener="#{uploadBean.submitFile}"
styleClass="ui-priority-primary" update="submitButton" disabled="#{! (uploadBean.enableSubmit)}"/>
</center>
</p:outputPanel>
</h:form>
</h:body>
</ui:define>
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>
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 !!!!
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?