I want to align two grids side by side, one left, one right. How to do it?
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.
Does the approach I suggested meet your requirements?
Hi Jason, I was in a hurry so haven't tested your solution yet, this week I'm going to do it, I will let you know. Thank you for your kind.
Luis,
Thank you for the update. I'll check back in a few days if I haven't heard from you by that time. Please let me know if I can be of any other help in the meantime.
Have you been able to test the implementation I provided? Please let me know if I may be of any further help.
Sorry for the delay Jason, I have made a test and guess what? Your solution works great!!!! :) It shines like a start. You make my life easier. Thanks again.
Here is a piece of code just in case someone else needs it:
$(function () { var containerDiv = $("#Grid1").igGrid("container"); containerDiv.css("display", "inline-block"); containerDiv = $("#Grid2").igGrid("container"); containerDiv.css("display", "inline-block"); });