f:selectItems for p:selectOneRadio are not aligned properly

Question

Below is the code i am using

 <p:panel id="panel" styleClass="panelWidth" header="Please answer the following Questions " >
            <h:panelGrid cellpadding="5" >
<p:selectOneRadio value="#{sendingRequest.selectedAnser1}" layout="pageDirection" styleClass="questionsFont">

                        <f:selectItems value="#{sendingRequest.questionChoices2}"/>

<p:selectOneRadio value="#{sendingRequest.selectedAnser2}" layout="pageDirection" styleClass="questionsFont">

                        <f:selectItems value="#{sendingRequest.questionChoices3}"  />
                    </p:selectOneRadio>

But in my front end page, radio buttons are displaying to left side and options to center of the panel.

Close your tags and maybe present it in more readable way if you expect anyone to help you. — Geinmachi, Oct 27 '15 at 20:51
And use correct tags (java (se)? But no css?) and look at the generated html client side and **try** to analyze that and look for a cause — Kukeltje, Oct 27 '15 at 22:42
Start here: http://www.htmldog.com/guides/css/beginner And then http://stackoverflow.com/q/8768317 — BalusC, Oct 28 '15 at 06:48

score 1 · Answer 1 · answered Oct 28 '15 at 14:29

I suspect the input template that you're providing could be the issue, as I see you're making use of custom layout tags. Investigate this scenario by plugging in any of the examples from the Primefaces SelectOneRadio page onto your current page to see if you get the same result.

I closed off the tags for the code you supplied and gave a Primefaces example you can temporarily incorporate into your code, so that you can examine the two examples.

<!-- Primefaces Example -->
<h:form>
    <h3 style="margin-top:0">Basic</h3>
    <h:panelGrid columns="2" style="margin-bottom:10px" cellpadding="5">
        <p:outputLabel for="console" value="Console:"/>
        <p:selectOneRadio id="console" value="#{radioView.console}">
            <f:selectItem itemLabel="Xbox One" itemValue="Xbox One"/>
            <f:selectItem itemLabel="PS4" itemValue="PS4"/>
            <f:selectItem itemLabel="Wii U" itemValue="Wii U"/>
        </p:selectOneRadio>
    </h:panelGrid>
</h:form>

<!-- Your Example (with closed off tags)-->
<h:form>
    <p:panel id="panel" styleClass="panelWidth" header="Please answer the following Questions ">
        <h:panelGrid cellpadding="5">
            <p:selectOneRadio value="#{sendingRequest.selectedAnser1}" layout="pageDirection"
                              styleClass="questionsFont">
                <f:selectItems value="#{sendingRequest.questionChoices2}"/>
            </p:selectOneRadio>
            <p:selectOneRadio value="#{sendingRequest.selectedAnser2}" layout="pageDirection"
                              styleClass="questionsFont">
                <f:selectItems value="#{sendingRequest.questionChoices3}"/>
            </p:selectOneRadio>
        </h:panelGrid>
    </p:panel>
</h:form>

If it does turn out to be styling related, please post the CSS you're currently using. Best of luck!

f:selectItems for p:selectOneRadio are not aligned properly

1 Answers1