Bem vou exibir as imagens para ser mais direto e o código:
Aqui eu fiz um panel lateral igual ao do showcase do primefaces (onde tem panel modificado), até aí tudo bem, mas onde tem panel normal eu quero que ele fique ao lado e não abaixo como está aí.
PRIMEFACES
<p:dialog header="Visualizar cidades" widgetVar="dialogCidades" resizable="false" closable="false"
showEffect="clip" hideEffect="fold" modal="true" width="820" height="400"
styleClass="dialogSemMargem">
<p:panel styleClass="painelQuadradoSombraDireita">
<p:autoComplete id="autoCompleteCidades" completeMethod="#{cidadeMB.autoCompleta}"
forceSelection="false" minQueryLength="2" queryDelay="800"/>
<p:spacer height="4" width="100%"/>
<p:selectOneListbox id="scroll" style="height: 349px; width: 100%;">
<f:selectItems value="#{cidadeMB.listaLazyNomeDeCidades}"/>
</p:selectOneListbox>
</p:panel>
<p:panel>
<h:outputText value="teste"/>
</p:panel>
<!-- <h:panelGroup style="left: 0px; top: 0px; width: 200px; height: 120px;"/>-->
<!-- RODAPÉ DA TELA -->
<f:facet name="footer">
<p:commandButton value="Concluir!"/>
<p:button value="Cancelar" onclick="dialogCidades.hide(); return false;" style="left:620px;"/>
</f:facet>
<p:hotkey bind="esc" handler="dialogCidades.hide()"/>
</p:dialog>CSS
.painelQuadradoSombraDireita.ui-panel {
background: #FFF;
border-radius: 0;
border: 0;
width: 200px;
height: 395px;
-moz-box-shadow: 5px 5px 5px #888;
-webkit-box-shadow: 5px 5px 5px #888;
box-shadow: 5px 5px 5px #888;
}Para tentar resolver coloquei um <p:panelGrid> para geral duas colunas e colocar um panel em cada:
PRIMEFACES
<p:dialog header="Visualizar cidades" widgetVar="dialogCidades" resizable="false" closable="false"
showEffect="clip" hideEffect="fold" modal="true" width="820" height="400"
styleClass="dialogSemMargem">
//APENAS ADICIONEI AQUI
<p:panelGrid columns="2">
<p:panel styleClass="painelQuadradoSombraDireita">
<p:autoComplete id="autoCompleteCidades" completeMethod="#{cidadeMB.autoCompleta}"
forceSelection="false" minQueryLength="2" queryDelay="800"/>
<p:spacer height="4" width="100%"/>
<p:selectOneListbox id="scroll" style="height: 349px; width: 100%;">
<f:selectItems value="#{cidadeMB.listaLazyNomeDeCidades}"/>
</p:selectOneListbox>
</p:panel>
<p:panel>
<h:outputText value="teste"/>
</p:panel>
</p:panelGrid>
<!-- <h:panelGroup style="left: 0px; top: 0px; width: 200px; height: 120px;"/>-->
<!-- RODAPÉ DA TELA -->
<f:facet name="footer">
<p:commandButton value="Concluir!"/>
<p:button value="Cancelar" onclick="dialogCidades.hide(); return false;" style="left:620px;"/>
</f:facet>
<p:hotkey bind="esc" handler="dialogCidades.hide()"/>
</p:dialog>Ficou assim:
Mas percebam que agora o componente ficou com um padding na esquerda e no topo. Quero retirar isso! Como faço? Já tentei de tudo aqui modificando classes tanto no JSF quanto no CSS, tentando pegar o componente e atribuir padding 0 e nada!
Alguém tem uma solução?
*OBS: O panel modificado fica colado ao dialog porque o dialog usa uma classe css que determinda padding zero dentro do componente, ou seja, o panelGrid está ficando colado ao dialog como vocês pode ver e é isso que ele deve fazer mesmo, só não consigo acessá-lo e definir novamente padding zero ou alguma coisa que coloque os panels que estão dentro dele para colar na borda.
