I'm using jsf 2.2 and primefaces 6.1. I try to position a dataTable with different columns on the right side next to a sidebar/ sidemenu, which is fixed on the left border of the Gui. I'm using templates and contentpanels to build up each component depending on the pageNavigation or UserInput.
But the problem is, that the dataTable is always shown below, not next to the sidemenu.
I have this code:
template/menuLeft.xhtml:
<!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>.menuButton {float: left;}</style>
</h:head>
<h:form>
<p:menu toggleable="true">
<p:submenu label="#{msg['orders']}">
<p:menuitem value="#{msg['save']}" icon="ui-icon-disk" />
<p:menuitem value="#{msg['updaten']}" icon="ui-icon-arrowrefres1-w"/>
<p:submenu label="#{msgArticle['article']}">
<p:menuitem value="#{msgArticle['article']}"
outcome="#{articleController.toArticleContent()}" />
<p:menuitem value="#{msgArticle['articleFast']}"/>
</p:submenu>
</p:menu>
</h:form>
</html>
dataTable articleContent.xhtml:
<!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>
</h:head>
<f:view locale="#{languageBean.locale}">
<ui:composition template="/WEB-INF/lib/templates/template.xhtml" >
<ui:define name="contentPanel" >
<p:dataTable var="article" value="#{articlesBean.articles}" >
<f:facet name="header">
<h:outputText value="#{msg['deliveryMen']}" />
</f:facet>
<p:column headerText="Aktionen" >
<h:outputText value="verschied. Aktionen" />
</p:column>
<p:column headerText="#{msgArticle['picture']}">
<h:outputText value="Bild" />
</p:column>
<p:column headerText="#{msgArticle['articleNumber']}">
<h:outputText value="#{articleBean.articleNumber}" />
</p:column>
</p:dataTable>
</ui:define>
</ui:composition>
</f:view>
</html>
template/content.xhtml:
<!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://xmlns.jcp.org/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui">
<h:head>
<title><ui:insert name="title">Default title</ui:insert></title>
</h:head>
<h:body>
<div id="menuLeft" style="float: left">
<ui:insert name="menuLeft">
<ui:include src="/WEB-INF/lib/templates/menuLeft.xhtml" />
</ui:insert>
</div>
<div id="contentPanel" style="float: left">
<ui:insert name="contentPanel">
<ui:include src="/WEB-INF/lib/templates/contentPanel.xhtml" />
</ui:insert>
</div>
</h:body>
JavaBean ArticleController.java:
package controller;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.ViewScoped;
import dao.ArticleRepository;
import dao.model.Article;
import util.RoleUtil;
#ManagedBean
#ViewScoped
public class ArticleController {
private RoleUtil roleUtil = new RoleUtil();
private ArticleRepository articleRepos = new ArticleRepository();
public String toArticleContent() {
return "articleContent";
}
}
When I click on the submenuButton "Article" the dataTable should be seen on the right side next to the sideMenu, but its shown below. I tried diverse css-Style commands like:
<style>.menuButton {float: left;}</style>
style="float: left"
style="text-align: right;"
<f:facet name="left">
...
</f:facet>
<f:facet name="right">
...
</f:facet>
style = "margin-left:auto; margin-right:auto;"
but without any effect...
Can someone help me to aligne the datatable RIGHT to the sidemenu?
Related
I have a template of primefaces, using css I have tried to place the color but the color comes out at the bottom of the center position, but in the p: menubar the color does not appear
with the background-color enabled
https://imgur.com/a/tiidj7A
with the background-color disabled
https://imgur.com/a/cGX56Fn
this is the template primefaces
<!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://xmlns.jcp.org/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets">
<h:head>
<title><ui:insert name="title">Default Title</ui:insert></title>
<h:outputStylesheet library="css" name="jsfcrud.css"/>
<style type="text/css">
.myLayoutStyleClass .ui-layout-unit-content {
background-color: #D8D8DA;
}
</style>
</h:head>
<f:view>
<h:body>
<p:layout fullPage="true">
<p:layoutUnit position="north" >
<h:graphicImage library="images" name="logo.jpg" />
<h:panelGrid columns="1" id="headertags">
<h:outputText id="h1" styleClass="h1Style" value="#{user.name}"/>
<h:outputText id="h2" styleClass="h2Style" value="Hora actual: #{dialogBean.time}"/>
</h:panelGrid>
</p:layoutUnit>
<p:layoutUnit position="center" styleClass="myLayoutStyleClass" >
<ui:insert name="content">
Página en construcción
</ui:insert>
</p:layoutUnit>
<p:layoutUnit position="south" >
<ui:insert name="footer">
</ui:insert>
</p:layoutUnit>
</p:layout>
</h:body>
</f:view>
</html>
If I try to apply the style in the index, the menu continues without color, no matter where and how the css class applies
<?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">
<ui:composition template="/WEB-INF/templates/template.xhtml"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:p="http://primefaces.org/ui"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
>
<ui:define name="title">
<h:outputText value="Pagina Administrador"></h:outputText>
</ui:define>
<ui:define name="content">
<h:form id="menuForm" >
<p:menubar >
<p:submenu label="Inicio" icon="ui-icon-home">
<p:menuitem value="Matenimiento Clientes" outcome="clientes/ClienteList"/>
<p:menuitem value="Matenimiento Vehiculos" outcome="vehiculos/VehiculoList"/>
<p:menuitem value="Matenimiento Registros" outcome="registros/RegistroList"/>
<p:menuitem value="Reporte Clientes" outcome="clientes/ClienteReport"/>
<p:menuitem value="Reporte Vehiculos" outcome="vehiculos/VehiculoReport"/>
<p:menuitem value="Reporte Registros" outcome="registros/RegistroReport"/>
<p:menuitem value="Configuracion Usuarios" outcome="usuarios/UsuarioList"/>
<p:menuitem value="Configuracion Grupos" outcome="grupos/GrupoList"/>
</p:submenu>
<p:submenu label="Contraseña">
<p:menuitem value="Cambiar Contraseña" outcome="usuarios/UsuarioChange"/>
</p:submenu>
<p:submenu label="Salir">
<p:menuitem value="logout" action="#{user.logout}" />
</p:submenu>
</p:menubar>
</h:form>
</ui:define>
<ui:define name="footer">
<h:link outcome="/index" value="Regresar a la Pagina anterior"/>
</ui:define>
</ui:composition>
You are defining the background color only for the layout :
<style type="text/css">
.myLayoutStyleClass .ui-layout-unit-content {
background-color: #D8D8DA;
}
</style>
You need to define a style class for your menubar :
<p:menubar styleClass="mymenubar" >
....
.....
</p:menubar>
And customize the class on your css :
<style type="text/css">
.myLayoutStyleClass .ui-layout-unit-content {
background-color: #D8D8DA;
}
.mymenubar .ui-menubar {
background-color: #D8D8DA;
}
</style>
I'm trying to override some components libraries' css (PrimeFaces, BootsFaces), but can't manage to import my custom css last. I've tried various things that I found so far, but nothing worked.
Below is the master template, where I import the css. Like that it is imported, but before all other resources. After that I list the other tries that I had.
I can imagine, that that the problem is, that I use templates.
master.xhtml
<?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://xmlns.jcp.org/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui"
xmlns:b="http://bootsfaces.net/ui"
xmlns:f="http://java.sun.com/jsf/core">
<h:head>
<title><ui:insert name="title">Project Documents Tutorial</ui:insert></title>
<h:outputStylesheet name="css/projdocstut.css" />
</h:head>
<h:body>
<b:container>
<div id="header" class="header">
<b:row>
<b:column span="12">
<ui:insert name="header">
<ui:include src="top-menu.xhtml" />
<ui:include src="main-menu.xhtml" />
</ui:insert>
</b:column>
</b:row>
</div>
<div id="content" class="content">
<b:row>
<b:column span="12">
<ui:insert name="content">Standard Content</ui:insert>
</b:column>
</b:row>
</div>
<div id="footer" class="footer">
<b:row>
<b:column span="12">
<ui:insert name="footer">Standard Bottom</ui:insert>
</b:column>
</b:row>
</div>
</b:container>
</h:body>
</html>
I also tried the following.
1) Adding the following in the head / body --> result: no import at all
<f:facet name="last">
<h:outputStylesheet library="default" name="css/projdocstut.css" />
</f:facet>
2) Adding the following in the head / body: result--> resource is imported before all other resources
<f:facet name="last">
<h:outputStylesheet name="css/projdocstut.css" />
</f:facet>
3) Adding following to the body: result --> resource is imported before all other resources
<h:outputStylesheet name="css/projdocstut.css" />
The index.xhtml which uses the template:
<?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://xmlns.jcp.org/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<ui:composition template="WEB-INF/templates/master.xhtml">
<ui:define name="content">
Custom Content
</ui:define>
</ui:composition>
</html>
Bootsfaces handles this issue by allowing you to define a "position" attribute in the <h:outputStylesheet> tag.
<h:head>
...
<h:outputStylesheet name="css/style.css" position="last"/>
</h:head>
I'm trying develop my first aplication with richfaces, to do this I'm using samples from rf site.
In this moment I try develop dropdown menu as link below
http://showcase.richfaces.org/richfaces/component-...nu&sample=topMenu&skin=classic
But I can't change color of bar menu.
I want this:
But I have this:
I'm working in netbeans and have added richfaces to a JSF (with facelets) project. I just added the jar and css files of richfaces, nothing more.
Bellow my facelet template and my menu file:
<?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:h="http://java.sun.com/jsf/html">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="./../../resources/css/default.css" rel="stylesheet" type="text/css" />
<link href="./../../resources/css/cssLayout.css" rel="stylesheet" type="text/css" />
<title>Facelets Template</title>
</h:head>
<h:body>
<div id="top" >
<ui:insert name="top">Top</ui:insert>
<ui:include src="topo.xhtml" />
</div>
<div>
<div id="left">
<ui:insert name="left">Left</ui:insert>
</div>
<div id="content" class="left_content">
<ui:insert name="content">Content</ui:insert>
</div>
</div>
</h:body>
</html>
topo.xhtml
<!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:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich">
<ui:composition>
<h:outputStylesheet name="estilo">
.pic {
margin-bottom: -4px;
margin-right: 2px;
}
.search .rf-ddm-itm-sel {
background-color: transparent;
background-image:none;
border-color: transparent;
cursor: default;
}
</h:outputStylesheet>
<h:form>
<rich:toolbar height="26px">
<rich:dropDownMenu mode="ajax">
<f:facet name="label">
<h:panelGroup>
<h:graphicImage value="../resources/images/icon_client.jpg" styleClass="pic" alt="cliente" />
<h:outputText value=" Clientes" />
</h:panelGroup>
</f:facet>
<rich:menuItem label="Novo Cliente" ></rich:menuItem>
<rich:menuItem label="Consultar"></rich:menuItem>
</rich:dropDownMenu>
</rich:toolbar>
</h:form>
<a4j:outputPanel ajaxRendered="true">
<h:outputText value="Current Selection: "></h:outputText>
<h:outputText style="font-weight:bold" value="#{dropDownMenuBean.current}"></h:outputText>
</a4j:outputPanel>
<br />
</ui:composition>
</html>
What is wrong?
1) If you want to use RichFaces skin, then add in web.xml
<context-param>
<param-name>org.richfaces.skin</param-name>
<param-value>#{lookAndFeel.skin}</param-value>
<!-- blueSky, classic, DEFAULT, deepMarine, ruby, emeraldTown -->
</context-param>
<context-param>
<param-name>org.richfaces.enableControlSkinning</param-name>
<param-value>false</param-value>
</context-param>
<context-param>
<param-name>org.richfaces.enableControlSkinningClasses</param-name>
<param-value>true</param-value>
</context-param>
2) If you want to use your css, then move your links from h:header into h:body in template file like this
<h:body>
<link rel="stylesheet" type="text/css"
href="#{request.contextPath}/css/basic.css" media="all" />
</h:body>
I have a problem when checking/unchecking a checkbox under internet explorer 8.
When I check a checkbox, it "moves" vertically, then it returns in the original position when I uncheck it.
I tried to figure it out playing with margin and vertical-align, but with no luck.
The code work flawlessly in Firefox and Chrome.
Page:
<?xml version="1.0" encoding="UTF-8" ?>
<ui:composition template="../templates/ui-test.xhtml"
xmlns="http://www.w3.org/1999/xhtml" xmlns:c="http://java.sun.com/jsp/jstl/core"
xmlns:f="http://java.sun.com/jsf/core" xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html" xmlns:p="http://primefaces.org/ui"
xmlns:nttdata="http://nttdata.com/facelets" lang="it-IT">
<ui:define name="title">Test Checkbox</ui:define>
<ui:define name="head"></ui:define>
<ui:define name="navbar"></ui:define>
<ui:define name="content">
<div id="contentCc">
<h:outputText value="Selection: " />
<p:selectBooleanCheckbox value="#{testViewBean.selectedValue}" />
</div>
</ui:define>
</ui:composition>
Template:
<?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:c="http://java.sun.com/jsp/jstl/core"
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"
lang="it-IT">
<f:view contentType="text/html" locale="it_IT">
<h:head>
<f:facet name="first">
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv='Cache-control' content='no-cache, no-store, must-revalidate' />
<meta http-equiv='Expires' content='0' />
<meta http-equiv='Pragma' content='no-cache' />
<title>
<ui:insert name="title">Default title</ui:insert>
</title>
</f:facet>
<ui:insert name="head"></ui:insert>
</h:head>
<h:body>
<div id="outer">
<div id="header" class="ui-widget ui-widget-header ui-corner-all">
<ui:insert name="navbar">
<ui:include
src="#{pageContext.request.contextPath}/components/navbar/navbar.xhtml" />
</ui:insert>
</div> <!-- header -->
<div id="content">
<ui:insert name="content">Default Content</ui:insert>
</div>
<div id="footer">
<!--ui:insert name="footer"></ui:insert-->
</div>
</div> <!-- outer -->
</h:body>
</f:view>
</html>
The resulting XHTML code is valid (validated with validator.w3.org), but under ie8 the input element "dance" when clicked. Here are the images of checked and unchecked checkbox under ie8:
https://dl.dropboxusercontent.com/u/7865852/ie8_checkbox_unchecked.png
https://dl.dropboxusercontent.com/u/7865852/ie8_checkbox_checked.png
Using h:selectBooleanCheckbox instead of p:selectBooleanCheckbox works under ie8, but I lose all the (framework default) css styles applied.
I have the same problem, but with all the browser (primefaces 5.1)
I fixed it with css on checkbox elements
display: block;
float: left;
I dont understand why css classes doesnt work.
newcss.css:
.greenClass {
color: green;
}
index.xhtml:
<?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://xmlns.jcp.org/jsf/html">
<h:head>
<h:outputStylesheet library="css" name="newcss.css"/>
</h:head>
<h:form styleClass="greenClass">
<h:outputLabel styleClass="greenClass" value="AAA"/>
</h:form>
</html>
HTML code
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"><head id="j_idt2"><link type="text/css" rel="stylesheet" href="/WA/faces/javax.faces.resource/newcss.css" /></head>
<form id="j_idt4" name="j_idt4" method="post" action="/WA/faces/index.xhtml" class="greenClass" enctype="application/x-www-form-urlencoded">
<input type="hidden" name="j_idt4" value="j_idt4" />
<label class="greenClass">AAA</label><input type="hidden" name="javax.faces.ViewState" id="j_id1:javax.faces.ViewState:0" value="-7146797988252848648:-7580080555543519594" autocomplete="off" />
</form>
</html>
and this doesnt work
<?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://xmlns.jcp.org/jsf/html">
<h:form>
<h:outputLabel styleClass="greenClass" value="AAA"/>
</h:form>
</html>
But the following works correctly:
<?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://xmlns.jcp.org/jsf/html">
<h:form>
<h:outputLabel style="color: green" value="AAA"/>
</h:form>
</html>
HTML Code:
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<form id="j_idt2" name="j_idt2" method="post" action="/WA/faces/index.xhtml" enctype="application/x-www-form-urlencoded">
<input type="hidden" name="j_idt2" value="j_idt2" />
<label style="color:green">AAA</label><input type="hidden" name="javax.faces.ViewState" id="j_id1:javax.faces.ViewState:0" value="8578298320156968921:4997153480898762925" autocomplete="off" />
</form>
</html>
Can you explain what can be reason of this and how to fix this?
In your example, that doesn't work, you're missing the
<h:head>
<h:outputStylesheet library="css" name="newcss.css"/>
</h:head>
part.