panelGrid column controls need in the same line

Question

I am using primefaces panelgrid to have one row and two columns. in the second column, I have selectoneradio and calendar. How to make them show in the same line??

<p:column>
                <p:selectOneRadio id="console" value="#{selectedGenDataRadio}">
                    <f:selectItem itemLabel="Immediately" itemValue="Immediate" />
                    <f:selectItem itemLabel="" itemValue="DateOne">
                    </f:selectItem>
                 </p:selectOneRadio>
                <p:calendar id="calgenDate" showOn="button" />
            </p:column>

you can tweak around with some css, but you could also place them into 2 different columns — Ouerghi Yassine, Jul 27 '15 at 08:41

score 1 · Answer 1 · answered Jul 27 '15 at 08:52

I think that should work:

                <p:column>
                    <table>
                        <tr>
                            <td>
                                <p:selectOneRadio id="console" value="#{selectedGenDataRadio}" >
                                    <f:selectItem itemLabel="Immediately" itemValue="Immediate" />
                                    <f:selectItem itemLabel="" itemValue="DateOne">
                                    </f:selectItem>
                                 </p:selectOneRadio>
                             </td>
                             <td>
                                <p:calendar id="calgenDate" showOn="button" />
                            </td>
                        <tr>
                    </table>
                </p:column>

score 0 · Answer 2 · answered Jul 27 '15 at 08:54

CSS solution:

    <p:panelGrid>
        <p:row>
        <p:column>
            <p:selectOneRadio id="console" style="float: left;">
                <f:selectItem itemLabel="Immediately" itemValue="Immediate" />
                <f:selectItem itemLabel="" itemValue="DateOne">
                </f:selectItem>
            </p:selectOneRadio>
            <p:calendar id="calgenDate" showOn="button"/>
        </p:column>
        </p:row>
    </p:panelGrid>

Extra column solution:

    <p:panelGrid>
        <p:row>
            <p:column>
                <p:selectOneRadio id="console" >
                    <f:selectItem itemLabel="Immediately" itemValue="Immediate" />
                    <f:selectItem itemLabel="" itemValue="DateOne">
                    </f:selectItem>
                </p:selectOneRadio>
            </p:column>
            <p:column
                <p:calendar id="calgenDate" showOn="button" />
            </p:column>
        </p:row>
    </p:panelGrid>

panelGrid column controls need in the same line

2 Answers2