Responsive Column width

[blondie63]

I'm not sure that backup is optimizing columns..
Some feedback ? :)

[backpack-ai-bot[bot]]

Based on the information provided in the knowledge sources, it appears that Backpack has indeed been working on optimizing responsive column widths, but there have been some ongoing challenges and improvements. Here's a summary of the relevant information:

1. Backpack implements a responsive table feature that hides less important columns on smaller screens to improve mobile usability Backpack Docs. This is considered the best UX approach by the Backpack team.

2. There have been several issues and improvements related to column widths and responsive tables:

   • An issue was reported where the first column was too wide on mobile devices GitHub Issue 4118. The Backpack team proposed changing the default character limit for columns to improve this.

   • Another issue was reported regarding column header widths being incorrect when the responsive table was disabled GitHub Issue 4479. This was addressed in a pull request.

   • There have been ongoing efforts to improve the alignment and responsiveness of columns GitHub Issue 3939.

3. The Backpack team has been actively working on these issues and implementing fixes. However, some challenges persist, especially when dealing with tables that have many columns or when the responsive table feature is disabled.

4. Users have the option to customize column priorities to control which columns are hidden first on smaller screens Backpack Docs.

5. If you're experiencing issues with column widths or responsiveness, you might want to try:

   • Updating to the latest version of Backpack
   • Re-publishing Backpack assets
   • Adjusting column priorities
   • If necessary, disabling the responsive table feature for specific CRUD panels using CRUD::disableResponsiveTable()

Given the ongoing development and improvements, it's recommended to keep your Backpack installation up to date and report any specific issues you encounter to the Backpack GitHub repository for further assistance.

Relevant sources:

Github Issue (closed): [Bug] CRUD Table too wide on mobile
Github Issue (closed): [Bug] Column headers width is wrong if responsive table is disabled
List Operation|Responsive Table
Github Issue (closed): Column headers width is wrong if responsive is disabled and bulk actions are enabled [Bug]
Github Issue (closed): [4.2] ListOperation first column empty on mobile
Github Issue (closed): [4.2][Bug] Invisible first column is too wide
Columns|Define which columns to show or hide in the responsive table
Github Issue (closed): Hiding columns in list view
Github Issue (closed): Datatables Responsive
Github Issue (open): colspan issue in ListOperation
Github Issue (closed): [Bug] extra headers disableResponsiveTable

[karandatwani92]

Hey @blondie63

Datatable or CSS does not trim the text length here. It is being shortened on the server side. You can change the length via:

CRUD::column('body')->limit($characters = 100);

-- AND--

If you want to modify the <table class=""> tag classes, that is doable by theme config:
Step 1) publish theme config

php artisan vendor:publish --tag="theme-tabler-config"

Step 2) Replace table classes via config.

'table' => "table table-striped table-hover rounded card-table table-vcenter card-table shadow-xs border-xs display compact",