post by StefanoDado on May 25, 2022

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

post by sorin.sfirlogea on May 29, 2022

post by StefanoDado on May 30, 2022

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:

post by sorin.sfirlogea on May 31, 2022

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 / 4
May 2022