使用 colspan 时组件不在预期的行上

Question

我有一个 panelgrid，其中有 5 行和 7 列，并尝试使用 colspan 来排列列中的不同组件。我将把我的 xhtml 贴在下面：

            <p:panelGrid>
                <p:row>
                    <p:column>

                        <p:row>
                            <p:column>
                                <p:outputLabel value="Job Status:" />
                            </p:column>
                            <p:column colspan="4">
                                <p:selectOneMenu value="#{myBean.jobStatus}">
                                   f:selectItems here
                                </p:selectOneMenu>
                            </p:column>                                                     
                            <p:column>
                                <p:selectBooleanCheckbox id="cbRepetition"
                                    value="#{myBean.isRepeatable}"
                                </p:selectBooleanCheckbox>
                            </p:column>
                            <p:column>
                                <p:outputLabel value="Terminate repetition of this job?" />
                            </p:column>
                        </p:row>

                        <p:row>
                            <p:column>
                                <p:outputLabel value="Positions:" />
                            </p:column>
                            <p:column>
                                <p:spinner id="position1"
                                    value="#{myBean.selectedPosition1}" />
                            </p:column>
                            <p:column>
                                <p:spinner id="position2"
                                    value="#{myBean.selectedPosition2}" />
                            </p:column>
                            <p:column>
                                <p:spinner id="position3"
                                    value="#{myBean.selectedPosition3}" />
                            </p:column>
                            <p:column>
                                <p:spinner id="position4"
                                    value="#{myBean.selectedPosition4}" />
                            </p:column>                                                     
                            <p:column>
                                <p:outputLabel value="Occurrences:" />
                            </p:column>
                            <p:column>
                                <p:spinner id="occurrences"
                                    value="#{myBean.selectedOccurrences}" />
                            </p:column>
                        </p:row>

                        <p:row>
                            <p:column>
                                <p:outputLabel value="Date/Time:" />
                            </p:column>
                            <p:column colspan="4">
                                <p:calendar id="dateTime" pattern="dd/MM/yyyy HH:mm"
                                    value="#{myBean.selectedDateTime}">
                                </p:calendar>
                            </p:column>                                                     
                            <p:column>
                                <p:outputLabel value="Job Location:" />
                            </p:column>
                            <p:column>
                                <p:selectOneMenu id="locationDd"
                                    value="#{myBean.selectedLocationId}">
                                    <f:selectItem itemLabel="Select" itemValue="0" />
                                    <f:selectItem itemLabel="Australia" itemValue="1" />
                                    <f:selectItem itemLabel="Springfield" itemValue="2" />
                                </p:selectOneMenu>
                            </p:column>
                        </p:row>

                        <p:row>
                            <p:column>
                                <p:outputLabel value="Comments:" />
                            </p:column>
                            <p:column colspan="6">
                                <p:inputTextarea />
                            </p:column>
                        </p:row>

                    </p:column>
                </p:row>
            </p:panelGrid>

我对代码进行了一些重构，例如 jobStatus selectOneMenu 实际上是我创建的自定义组件，但我相信这不是问题，因为它已在我项目的其他地方使用过有什么麻烦。

此 panelGrid 位于表单的面板内。

我希望我想要达到的目标很明显，但我实际得到的如下：

我已经使用 CSS 使微调器变小，因为它们应该足够大以适合整数 0-9，但这没有效果，关于为什么没有显示的任何建议正确的行或我可以做些什么来使它们按我的意愿显示？

干杯。

Answer 1

我意识到我只需要删除初始的 <p:row> 和 <p:column>，它工作正常。

使用 colspan 时组件不在预期的行上

Components not on expected row when using colspan

css

xhtml

primefaces

panelgrid