Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
2165
Align two grids
posted

I want to align two grids side by side, one left, one right. How to do it?

Parents
No Data
Reply
  • 8421
    Verified Answer
    posted

    Hello Luis,

    It is important to note that at their most basic the grids are simply divs with content. You can position them on the page using CSS just like you would any other div. That said, to have two grids side by side you can target the grids' containers and set display to inline-block. This will put the grids next to each other, though they will wrap if the screen width is too small to display both grids.

    If you would like to prevent that wrapping effect then create another div that contains both of your grids. For this element, add a style that sets white-space: nowrap. In addition, you'll want to modify your previous style that targets the grids to add in white-space: normal to prevent some weird styling due to style inheritance:

        <style type="text/css">
            .ui-iggrid {
                display: inline-block;
                white-space: normal;
            }

            #gridsContainer{
                white-space: nowrap;
            }
        </style>

    Please let me know if I may be of any further help with this.

Children