Page 1 of 1
Form Grid with autocompletes
Posted: 13 Jul 2015, 08:54
by manelseo
Hello,
I 'm using the grid with panelGrid of 8 columns and selectonemenu inputs.
The result is the selectonemenu inputs are Placed on the space of labels.
¿What is the best way to implements this Kind of form ?
<p:panelGrid id="panelButtons" columns="6" layout="grid" style="border:0px !important; background:none;"
columnClasses="Wid10 Responsive100, Wid20 Responsive100, Wid10 Responsive100, Wid20 Responsive100, Wid10 Responsive100, Wid20 Responsive100" styleClass="Responsive100">
<p:outputLabel ... />
<p:selectOneMenu styleClass="Wid90 Responsive100" ... />
<p:outputLabel ... />
<p:selectOneMenu styleClass="Wid90 Responsive100" ... />
<p:outputLabel ... />
<p:selectOneMenu styleClass="Wid90 Responsive100" ... />
...
</p:panelGrid>
Best Regards ,
Re: Form Grid with autocompletes
Posted: 14 Jul 2015, 09:28
by mert.sincan
I think you can use Grid Css.
http://www.primefaces.org/showcase/ui/panel/grid.xhtml
Please try with my test.xhtml;
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"
template="/WEB-INF/template.xhtml">
<ui:define name="head">
<style type="text/css">
.ui-grid-row .ui-selectonemenu {
width: 50% !important;
margin-left: 10px;
}
</style>
</ui:define>
<ui:define name="content">
<div class="Container100">
<div class="ContainerIndent">
<div class="Card ShadowEffect ">
<h2 class="BigTopic">Test</h2>
<div class="ui-grid ui-grid-responsive">
<div class="ui-grid-row">
<div class="ui-grid-col-4">
<p:outputLabel for="s1" value="Test" />
<p:selectOneMenu id="s1" styleClass="myMenu">
<f:selectItem itemLabel="Select One" itemValue="" />
<f:selectItem itemLabel="Xbox One" itemValue="Xbox One" />
<f:selectItem itemLabel="PS4" itemValue="PS4" />
<f:selectItem itemLabel="Wii U" itemValue="Wii U" />
</p:selectOneMenu>
</div>
<div class="ui-grid-col-4">
<p:outputLabel for="s2" value="Test" />
<p:selectOneMenu id="s2" styleClass="myMenu">
<f:selectItem itemLabel="Select One" itemValue="" />
<f:selectItem itemLabel="Xbox One" itemValue="Xbox One" />
<f:selectItem itemLabel="PS4" itemValue="PS4" />
<f:selectItem itemLabel="Wii U" itemValue="Wii U" />
</p:selectOneMenu>
</div>
<div class="ui-grid-col-4">
<p:outputLabel for="s3" value="Test" />
<p:selectOneMenu id="s3" styleClass="myMenu">
<f:selectItem itemLabel="Select One" itemValue="" />
<f:selectItem itemLabel="Xbox One" itemValue="Xbox One" />
<f:selectItem itemLabel="PS4" itemValue="PS4" />
<f:selectItem itemLabel="Wii U" itemValue="Wii U" />
</p:selectOneMenu>
</div>
</div>
<div class="ui-grid-row">
<div class="ui-grid-col-4">
<p:outputLabel for="s4" value="Test" />
<p:selectOneMenu id="s4" styleClass="myMenu">
<f:selectItem itemLabel="Select One" itemValue="" />
<f:selectItem itemLabel="Xbox One" itemValue="Xbox One" />
<f:selectItem itemLabel="PS4" itemValue="PS4" />
<f:selectItem itemLabel="Wii U" itemValue="Wii U" />
</p:selectOneMenu>
</div>
<div class="ui-grid-col-4">
<p:outputLabel for="s5" value="Test" />
<p:selectOneMenu id="s5" styleClass="myMenu">
<f:selectItem itemLabel="Select One" itemValue="" />
<f:selectItem itemLabel="Xbox One" itemValue="Xbox One" />
<f:selectItem itemLabel="PS4" itemValue="PS4" />
<f:selectItem itemLabel="Wii U" itemValue="Wii U" />
</p:selectOneMenu>
</div>
<div class="ui-grid-col-4">
<p:outputLabel for="s6" value="Test" />
<p:selectOneMenu id="s6" styleClass="myMenu">
<f:selectItem itemLabel="Select One" itemValue="" />
<f:selectItem itemLabel="Xbox One" itemValue="Xbox One" />
<f:selectItem itemLabel="PS4" itemValue="PS4" />
<f:selectItem itemLabel="Wii U" itemValue="Wii U" />
</p:selectOneMenu>
</div>
</div>
</div>
</div>
</div>
</div>
</ui:define>
</ui:composition>