Form Grid with autocompletes

[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 ,

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