Nest a ui-g-12 inside the card

[wandyer]

I don't know if it's possible what I'm trying to do is basically I want to have the card with it's size ui-g-12 (default) and inside it I want to control the size of my contents with ui-g aswell.

Example: I'm using 'ui-g-12 ui-md-12 ui-lg-6' to say that I want my content to have 6 columns on desktop and 12 on mobile.

But when I nest a ui-g-12 inside another ui-g-12 the content floats to the left (default css for ui-g-12) and it actually goes outside the card, floating.

I tested this on the empty.xhml:

Code: Select all

<ui:define name="content">
        <div class="ui-g">
            <div class="ui-g-12">
                <div class="card">
                    <h1>Index</h1>
                    <div class="ui-g-12 ui-md-12 ui-lg-6" >
                        <p>Use this page to start from scratch and place your custom content.</p>
                        <p:button outcome="index" value="Home" style="display:inline-block;margin-top:5px"/>
                    </div>
                </div>
            </div>
        </div> 
 </ui:define>

The result:


It's basically floating my div with my content to the left which makes it go outside of the card, so the problem is with the float:left; of ui-g-12

Thanks in advance.

[wandyer]

I found a solution, I just need to add another ui-g before my 'ui-g-12 ui-md-12 ui-lg-6' content

Code: Select all

<ui:define name="content">
        <div class="ui-g">
            <div class="ui-g-12">
                <div class="card">
                    <h1>Index</h1>
                    <div class="ui-g">
                        <div class="ui-g-12 ui-md-12 ui-lg-6" >
                            <p>Use this page to start from scratch and place your custom content.</p>
                            <p:button outcome="index" value="Home" style="display:inline-block;margin-top:5px"/>
                        </div>  
                    </div>

                </div>
            </div>
        </div> 
</ui:define>

Now the floating of the ui-g-12 will not break out of the card.

[mert.sincan]

Thanks for the update! Yes, you need to use ui-g class to clear float. Exp; https://www.primefaces.org/showcase/ui/panel/grid.xhtml