Hi guys,
I’m looking for how to set the columns width (each one). It’s possible to do this?
Thanks in advace ![]()
post by StefanoDado on May 25, 2022
post by sorin.sfirlogea on May 29, 2022
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 - A PHP CRUD Generator Library).
Hope it helps you.
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 ![]()
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.
New & Unread Topics
| Topic | Replies | Views | Activity | |
|---|---|---|---|---|
| Use callbackColumn() but keep inline edit functionality |
|
3 | 657 | Apr 12 |
| callbackColumn() has not effect in v3.2.6 Enterprise |
|
2 | 699 | Dec 2025 |
| displayAs() doesn’t support new line in headings |
|
4 | 878 | Jan 5 |
| Inline edit has problems if the column width is set |
|
2 | 848 | Feb 28 |
| PRINT date format not consistent |
|
6 | 363 | Sep 7 |