Skip to content

grid width issue

← Datagrid Display
Question:

I put the grid inside of a section element that has padding around it. How do I keep the grid from pushing itself over? I need to make the grid less wide while still keeping it responsive. The grid shouldn’t be wider than it’s parent.

Solution (contributed by user Sander):

Add the following:

// uncomment to set width to parent DIV instead
$dg->before_script_end .= 'setTimeout(
    function(){$(window).on("resize", function()
    {
        phpGrid_' . $this->table . '.setGridWidth($("#mydiv").width()); 
    }).trigger("resize");
}, 0)';

#mydiv is the outer container id.

Here's the entire code. Hope this helps,

<div id="mydiv" style="width:800px">
<?php
$dg = new C_DataGrid("SELECT * FROM orders", "orderNumber", "orders");
$dg->enable_autowidth(true)->enable_autoheight(true);

// set width to parent DIV instead
$dg->before_script_end .= 'setTimeout(
    function(){$(window).on("resize", function()
    {
        phpGrid_' . $this->table . '.setGridWidth($("#mydiv").width());
    }).trigger("resize");
}, 0)';

$dg -> display();
?>
<style>
    /* optional. removes page margin */
    body{margin:0px;}
    /* optional. widen textbox width */
    .ui-jqgrid-bdiv input{width:100%;}
</style>
</div>


</body>
</html>

Feedback and Knowledge Base

(thinking…)