JSF Datatable why style changes after button click?

JSF Datatable why style changes after button click? - 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?

Related

Top align in prime faces DataGrid

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>

Align a PanelGrid which is in another PanelGrid

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 !!!!

how to center align <p:rating>

I am using <p:rating> in my JSF2-PrimeFace application. Find the code below:
<p:panel id="popular_offers_panel" style="width: 97%" styleClass="remove-PF-border panel-grid tr panel-grid td panel-header-title-medium">
<p:dataGrid id="popular_offers_data_grid" var="offer" value="#{HmBen.offersList}" columns="3" paginatorAlwaysVisible="false" styleClass="no-border-for-component">
<h:link title="#{msg._offer_on}#{msg._colon} #{offer.tag}" outcome="offer_details?offer=#{offer.seoURL}">
<p:panel id="popular_offers_details_panel" header="#{offer.where}" styleClass="panel-content-central-horizontal small-panel panel-grid tr panel-grid td panel-hover panel-header-title-small">
<p:panelGrid columns="1" style="text-align: center">
<div class="component-spacing-top"/>
<h:graphicImage alt="#{offer.where}" value="#{offer.imgFullPath}" class="small-panel-image" />
<p:rating value="#{offer.rating}" readonly="true" />
<p:panel styleClass="remove-PF-border">
<h:outputText value="#{offer.what}" rendered="#{offer.isOfferByTitle}" styleClass="font-size-1em font-weight-bold default-font-color" />
<h:outputText value="#{offer.discount}" rendered="#{offer.isOfferByDetails}" styleClass="font-size-1em font-weight-bold default-font-color" />
<sup>
<h:outputText value="#{msg._expiring_soon}" rendered="#{offer.isExpiringSoon}" styleClass="font-size-0-8em default-contrast-font-color" />
<h:outputText value="#{msg._this_offer_might_have_expired}" rendered="#{offer.isMightHaveExpired}" styleClass="font-size-0-8em default-contrast-font-color" />
<h:outputText value="#{msg._this_offer_has_expired}" rendered="#{offer.isExpired}" styleClass="font-size-0-8em default-contrast-font-color" />
</sup>
</p:panel>
</p:panelGrid>
</p:panel>
</h:link>
</p:dataGrid>
</p:panel>
Any clue on this?

Since p:rating render divs for each stars and they are floating, the main div has no size. Here is a way to achieve your goal :
CSS :
.center-rating
{
width: 96px;
margin: 0 auto;
}
View :
<p:rating value="#{offer.rating}" readonly="true" styleClass="center-rating" />

Primefaces TreeTable css style

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

h:dataTable loses selected row styleClass after submit

In my dataTable when a row is clicked it gets marked with some color. But then this mark disappears because submit occurs. But i re-render only some other part of the page and not the table, so why does it occur? How can i fix this?
The code:
<ui:composition 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:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich"
xmlns:p="http://primefaces.prime.com.tr/ui"
template="/templates/mainLayout.xhtml">
<ui:define name="header">
<h1>Persons List</h1>
</ui:define>
<ui:define name="content">
<h:form id="mainForm">
<h:outputStylesheet name="tableStyle.css" library="css" target="body"/>
<h:panelGroup id="personPanel">
<h:outputText value="#{msgs.fName}"/>
<h:inputText value="#{personController.person.firstName}" maxlength="20"/>
<h:outputText value="#{msgs.lName}"/>
<h:inputText value="#{personController.person.lastName}" maxlength="20"/>
<h:outputText value="#{msgs.phone}"/>
<h:inputText value="#{personController.person.phone}" maxlength="20"/>
</h:panelGroup>
<h:commandButton value="#{msgs.save}" >
<f:ajax execute="#form" render="personsTable personPanel" listener="#{personController.savePerson}"/>
</h:commandButton>
<h:dataTable id="personsTable" value="#{personController.persons}" var="bean"
styleClass="order-table" headerClass="order-table-header" rowClasses="order-table-odd-row,order-table-even-row" rules="none" >
<h:column>
<f:facet name="header">
<h:outputText value="First Name" />
</f:facet>
<h:commandLink value="#{bean.firstName}" >
<f:ajax execute="#this" render="personPanel" >
<f:setPropertyActionListener target="#{personController.person}" value="#{bean}" />
</f:ajax>
</h:commandLink>
</h:column>
<h:column>
<f:facet name="header">
<h:outputText value="Last Name" />
</f:facet>
<h:commandLink value="#{bean.lastName}" >
<f:ajax execute="#this" render="personPanel">
<f:setPropertyActionListener target="#{personController.person}" value="#{bean}" />
</f:ajax>
</h:commandLink>
</h:column>
<h:column>
<f:facet name="header">
<h:outputText value="Phone" />
</f:facet>
<h:commandLink value="#{bean.phone}" >
<!-- f:ajax execute="#this" render="personPanel">
<f:setPropertyActionListener target="#{personController.person}" value="#{bean}" />
</f:ajax-->
</h:commandLink>
</h:column>
</h:dataTable>
</h:form>
</ui:define>
<ui:define name="footer">
<script type="text/javascript">
$(document).ready(function(){
$(".order-table tr").mouseover(function(){
$(this).addClass("over");
});
$(".order-table tr").mouseout(function(){
$(this).removeClass("over");
});
$(".order-table tr").click(function(){
$(".order-table tr").removeClass("choose");
$(this).addClass("choose");
});
});
</script>
</ui:define>
</ui:composition>

You can use firefox and "firebug" plugin to inspect the element in real time to find out what's going on. It could be that something about your update is breaking the inheritance of the style...

Develop Reference

r css asp.net wordpress firebase qt symfony nginx http apache-flex

JSF Datatable why style changes after button click? - css

Related

Top align in prime faces DataGrid

Align a PanelGrid which is in another PanelGrid

how to center align <p:rating>

Primefaces TreeTable css style

h:dataTable loses selected row styleClass after submit

Categories

Resources