bug when I use layout="responsive" on selectManyCheckbox

[richardmmazon]

I'm running into some troubles trying the Responsive option for the selectManyCheckbox component.

When I use layout="responsive" primefaces don't renders the components correctly, the component after selectManyCheckbox stay inside of selectManyCheckbox parent component, something like that.

xhtml code:

Code: Select all

<div>
 <p:panel id="panel">                                                                
  <p:selectManyCheckbox id="p:selectManyCheckbox" layout="responsive" columns="6">
   <f:selectItem itemLabel="itemLabel" itemValue="itemValue" />                
  </p:selectManyCheckbox>				                                            
 </p:panel>                                                                          
 <p:outputLabel id="outputLabel" value="outputLabel" />	
</div>		                        

In the xhtml genereted I realized that the first div is not closed

xhtml genereted:

Code: Select all

<div>
 <div id="form:panel" class="ui-panel ui-widget ui-widget-content ui-corner-all" data-widget="widget_form_panel">
  <div id="form:panel_content" class="ui-panel-content ui-widget-content">
   <div id="form:selectManyCheckbox" class="ui-selectmanycheckbox ui-widget ui-grid ui-grid-responsive">
    <div class="ui-grid-row">
     <div class="ui-grid-col-2">
      <div class="ui-chkbox ui-widget">
       <div class="ui-helper-hidden-accessible">
        <input id="form:selectManyCheckbox:0" name="form:selectManyCheckbox" type="checkbox" value="itemValue">
       </div>
       <div class="ui-chkbox-box ui-widget ui-corner-all ui-state-default">
        <span class="ui-chkbox-icon ui-icon ui-icon-blank ui-c"></span>
       </div>
      </div>
      <label for="form:selectManyCheckbox:0">itemLabel</label>
     </div>
    </div>
   </div>
  </div>
  <label id="form:outputLabel" class="ui-outputlabel ui-widget">outputLabel</label>
 </div>

Page screenshot: