Grocery CRUD Flexigrid - Set column width

Grocery CRUD Enterprise
1

Hi guys,
I’m looking for how to set the columns width (each one). It’s possible to do this?
Thanks in advace :wink:

2

Hi Stefano,
The only way I know it can be done is by using JS (or jQuery). Each column has a order-by data attribute, that holds the name of the field. You can use this to change the width. Pay attention that the script should be triggered after the datagrid is fully rendered (see instructions here: JavaScript Events | Grocery CRUD).
Hope it helps you.

3

Hi Sorin,

thank you for the answer.
I tried your solution but unfortunately it doesn’t seem to work.
This is my code:

<script>
    window.addEventListener('gcrud.datagrid.ready', () => {
        console.log('Start resize');
        console.log($('[data-order-by="project"]').width());
        $('[data-order-by="project"]').width(100);
        console.log($('[data-order-by="project"]').width());
        console.log('Stop resize');
    });
</script>

And this is the log result:

Start resize
199
199
Stop resize

I also tried with addClass but even if the class is added the width remains the same :frowning:

4

The reason is a CSS property set by Grocery-CRUD for td.gc-data-container elements.

td.gc-data-container {
  white-space: nowrap !important; 
}

Once you get rid of that, the resizing will work. Use the inspector to analyze and simulate.
Regards.

1 Like