I am following the example in sample.xhtml (http://www.primefaces.org/modena/sample.xhtml). In this example, we have this combination:
<div class="ui-fluid">
<p:panelGrid layout="grid">
<p:selectOneMenu>
This works to become this page responsive and to align the components putting them with the same width (great!), but with this white stripe.
My code is:
Code: Select all
<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"
xmlns:l="http://java.sun.com/jsf/composite/componentes"
xmlns:pe="http://primefaces.org/ui/extensions"
template="/WEB-INF/template.xhtml">
<ui:define name="content">
<div class="Container100 Responsive100">
<div class="ContainerIndent">
<div class="Card ShadowEffect HeiAutoOnMobile"
style="min-height: 275px;">
<h:form id="frmCadastro">
<f:validateBean disabled="true">
<p:wizard id="venda" widgetVar="wizVenda" showNavBar="false"
showStepStatus="true" nextLabel="#{msg.label_proximo}"
backLabel="#{msg.label_anterior}">
<p:tab id="tabInfo" title="#{msg.label_venda}">
<p:panel id="pnlInfo">
<p:focus for="mnuLoja" />
<div class="Container100 Fs22 BoldGray">
<h:outputText value="#{msg.label_informacoes_da_venda}" />
</div>
<div class="EmptyBox20" />
<div class="ContainerIndent">
<div class="ui-fluid">
<p:panelGrid columns="6"
columnClasses="ui-grid-col-1,ui-grid-col-3,ui-grid-col-2,ui-grid-col-1,ui-grid-col-3,ui-grid-col-2"
layout="grid" styleClass="ui-panelgrid-blank"
style="border:0px none; background-color:transparent;">
<p:outputLabel for="mnuLoja"
value="#{msg.label_venda_loja}:" />
<p:selectOneMenu id="mnuLoja"
value="#{vendaBean.vendaSelecionada.loja}"
converter="DefaultConverter" required="true"
requiredMessage="#{venda_loja_requerida}" tabindex="1">
<f:selectItem itemLabel="#{msg.selecione}" noSelectionOption="true" />
<f:selectItems value="#{lojasDoFuncionarioLogado}"
var="loja" itemValue="#{loja}"
itemLabel="#{loja.descricao}" />
<p:clientValidator />
</p:selectOneMenu>
<p:message for="mnuLoja" />
<p:outputLabel for="txtDataVenda"
value="#{msg.label_venda_data}:" />
<p:calendar id="txtDataVenda"
title="#{msg.label_venda_data}"
value="#{vendaBean.vendaSelecionada.dataVenda}"
pattern="dd/MM/yyyy" mask="true" required="true"
requiredMessage="{msg.venda_data_requerida}" tabindex="2">
<p:clientValidator />
</p:calendar>
<p:message for="txtDataVenda" />
<p:outputLabel for="mnuVendedor"
value="#{msg.label_venda_vendedor}:" />
<p:selectOneMenu id="mnuVendedor"
value="#{vendaBean.vendaSelecionada.vendedor}"
converter="DefaultConverter" tabindex="4">
<f:selectItem itemLabel="#{msg.selecione}"
noSelectionOption="true" />
<f:selectItems value="#{funcionarios}" var="funcionario"
itemValue="#{funcionario}"
itemLabel="#{funcionario.nome}" />
<p:clientValidator />
</p:selectOneMenu>
<p:message for="mnuVendedor" />
</p:panelGrid>
</div>
</div>
</p:panel>
</p:tab>
</p:wizard>
</f:validateBean>
</h:form>
</div>
</div>
</div>
</ui:define>
</ui:composition>
