title: Using p:carousel inside p:dataGrid in PrimeFaces 5.3
body: <p>Displaying a <a href="http://www.primefaces.org/showcase/ui/data/carousel.xhtml" rel="nofollow noreferrer"><code>&lt;p:carousel&gt;</code></a> inside a <a href="http://www.primefaces.org/showcase/ui/data/dataGrid.xhtml" rel="nofollow noreferrer"><code>&lt;p:dataGrid&gt;</code></a> using <a href="http://central.maven.org/maven2/org/primefaces/primefaces/5.3/" rel="nofollow noreferrer">PrimeFaces 5.3 final</a> (community release) something along the following piece of code.</p>
  
  <pre><code>&lt;p:dataGrid var="gridRow" value="#{[1,2,3,4,5]}" columns="1"&gt;
      &lt;p:carousel var="row" value="#{[1,2,3,4,5]}" numVisible="3"&gt;
          &lt;p:panel&gt;Panel container : #{row}&lt;/p:panel&gt;
      &lt;/p:carousel&gt;
  &lt;/p:dataGrid&gt;
  </code></pre>
  
  <p>Using PrimeFaces <strong>5.2</strong> final, it displays the corresponding UI correctly as shown in the following picture.</p>
  
  <p><a href="https://i.stack.imgur.com/beGDT.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/beGDT.png" alt="enter image description here"></a></p>
  
  <p>Using PrimeFaces <strong>5.3</strong> final, the design is however, severely broken stretching items being held by a <code>&lt;p:carousel&gt;</code> too much horizontally as shown in the following picture.</p>
  
  <p><a href="https://i.stack.imgur.com/7t7Yc.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7t7Yc.png" alt="enter image description here"></a></p>
  
  <p>See the browser's long horizontal scroll bar at the bottom-left corner of the preceding picture.</p>
  
  <p>The problem occurs only when a <code>&lt;p:carousel&gt;</code> is displayed inside a <code>&lt;p:dataGrid&gt;</code> (or likely other iterating components). A <code>&lt;p:carousel&gt;</code> independently displays exactly which it is meant for.</p>
  
  <p>What is the problem with PrimeFaces 5.3? Is there any workaround?</p>