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>
Related
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>
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">.