title: Components not on expected row when using colspan
body: <p>I have a panelgrid with 5 rows and 7 columns within and have tried to use colspan to line up the different components within the columns. I'll stick my xhtml below:</p>
  
  <pre><code>            &lt;p:panelGrid&gt;
                  &lt;p:row&gt;
                      &lt;p:column&gt;
  
                          &lt;p:row&gt;
                              &lt;p:column&gt;
                                  &lt;p:outputLabel value="Job Status:" /&gt;
                              &lt;/p:column&gt;
                              &lt;p:column colspan="4"&gt;
                                  &lt;p:selectOneMenu value="#{myBean.jobStatus}"&gt;
                                     f:selectItems here
                                  &lt;/p:selectOneMenu&gt;
                              &lt;/p:column&gt;                                                     
                              &lt;p:column&gt;
                                  &lt;p:selectBooleanCheckbox id="cbRepetition"
                                      value="#{myBean.isRepeatable}"
                                  &lt;/p:selectBooleanCheckbox&gt;
                              &lt;/p:column&gt;
                              &lt;p:column&gt;
                                  &lt;p:outputLabel value="Terminate repetition of this job?" /&gt;
                              &lt;/p:column&gt;
                          &lt;/p:row&gt;
  
                          &lt;p:row&gt;
                              &lt;p:column&gt;
                                  &lt;p:outputLabel value="Positions:" /&gt;
                              &lt;/p:column&gt;
                              &lt;p:column&gt;
                                  &lt;p:spinner id="position1"
                                      value="#{myBean.selectedPosition1}" /&gt;
                              &lt;/p:column&gt;
                              &lt;p:column&gt;
                                  &lt;p:spinner id="position2"
                                      value="#{myBean.selectedPosition2}" /&gt;
                              &lt;/p:column&gt;
                              &lt;p:column&gt;
                                  &lt;p:spinner id="position3"
                                      value="#{myBean.selectedPosition3}" /&gt;
                              &lt;/p:column&gt;
                              &lt;p:column&gt;
                                  &lt;p:spinner id="position4"
                                      value="#{myBean.selectedPosition4}" /&gt;
                              &lt;/p:column&gt;                                                     
                              &lt;p:column&gt;
                                  &lt;p:outputLabel value="Occurrences:" /&gt;
                              &lt;/p:column&gt;
                              &lt;p:column&gt;
                                  &lt;p:spinner id="occurrences"
                                      value="#{myBean.selectedOccurrences}" /&gt;
                              &lt;/p:column&gt;
                          &lt;/p:row&gt;
  
                          &lt;p:row&gt;
                              &lt;p:column&gt;
                                  &lt;p:outputLabel value="Date/Time:" /&gt;
                              &lt;/p:column&gt;
                              &lt;p:column colspan="4"&gt;
                                  &lt;p:calendar id="dateTime" pattern="dd/MM/yyyy HH:mm"
                                      value="#{myBean.selectedDateTime}"&gt;
                                  &lt;/p:calendar&gt;
                              &lt;/p:column&gt;                                                     
                              &lt;p:column&gt;
                                  &lt;p:outputLabel value="Job Location:" /&gt;
                              &lt;/p:column&gt;
                              &lt;p:column&gt;
                                  &lt;p:selectOneMenu id="locationDd"
                                      value="#{myBean.selectedLocationId}"&gt;
                                      &lt;f:selectItem itemLabel="Select" itemValue="0" /&gt;
                                      &lt;f:selectItem itemLabel="Australia" itemValue="1" /&gt;
                                      &lt;f:selectItem itemLabel="Springfield" itemValue="2" /&gt;
                                  &lt;/p:selectOneMenu&gt;
                              &lt;/p:column&gt;
                          &lt;/p:row&gt;
  
                          &lt;p:row&gt;
                              &lt;p:column&gt;
                                  &lt;p:outputLabel value="Comments:" /&gt;
                              &lt;/p:column&gt;
                              &lt;p:column colspan="6"&gt;
                                  &lt;p:inputTextarea /&gt;
                              &lt;/p:column&gt;
                          &lt;/p:row&gt;
  
                      &lt;/p:column&gt;
                  &lt;/p:row&gt;
              &lt;/p:panelGrid&gt;
  </code></pre>
  
  <p>I've refactored the code a little bit, for example the jobStatus selectOneMenu is actually a custom component I've created, but I'm confident this isn't the issue as it's been used elsewhere in my project without any trouble.</p>
  
  <p>This panelGrid is sat within a panel within a form.</p>
  
  <p>I'm hoping it is obvious what I am trying to achieve, but what I'm actually getting is as below:</p>
  
  <p><img src="https://i.stack.imgur.com/H6cSk.jpg" alt="enter image description here"></p>
  
  <p>I've used CSS to make the spinners smaller as they should be just big enough to fit an integer 0-9, but this has had no effect, any suggestions why things aren't dislpaying on the correct rows or things I can do to make them display as I wish?</p>
  
  <p>Cheers.</p>