[Bug] Separate responsive controls from first column contents not showing

[dilneiss]

Bug report

What I did

Listing items on datatable

What I expected to happen

show 3 dots and actions button

What happened

When i have a big column title, the 3 dots menu is not showing, also actions button dissapear

What I've already tried to fix it

nothing yet

Is it a bug in the latest version of Backpack?

Yes

After I run composer update backpack/crud the bug... is it still there?
yes

Backpack, Laravel, PHP, DB version

When I run php artisan backpack:version the output is:

PHP VERSION:

8.3.12

PHP EXTENSIONS:

Core, date, libxml, openssl, pcre, zlib, filter, hash, json, pcntl, random, Reflection, SPL, session, standard, sodium, mysqlnd, PDO, xml, bcmath, calendar, ctype, curl, dom, mbstring, FFI, fileinfo, ftp, gd, gettext, gmp, iconv, igbinary, imagick, imap, intl, exif, msgpack, mysqli, pdo_mysql, pdo_pgsql, pdo_sqlite, pgsql, Phar, posix, readline, redis, shmop, SimpleXML, soap, sockets, sqlite3, sysvmsg, sysvsem, sysvshm, tokenizer, xmlreader, xmlwriter, xsl, zip, memcached, swoole, Zend OPcache

LARAVEL VERSION:

11.39.1.0

BACKPACK PACKAGE VERSIONS:

backpack/activity-log: 2.0.6
backpack/basset: 1.3.6
backpack/crud: 6.7.50
backpack/logmanager: v5.0.2
backpack/medialibrary-uploaders: 1.2.1
backpack/permissionmanager: 7.2.1
backpack/pro: 2.2.32
backpack/revise-operation: 2.0.0
backpack/settings: 3.1.1
backpack/theme-coreuiv4: 1.1.5

Additional Information

This is not showing 3 dots and actions button, chrome navigator, you can try resizing window

This is desktop version working

[backpack-ai-bot]

Based on the information provided in your question and the knowledge sources available, it appears you are experiencing an issue with the responsive controls and action buttons not displaying properly in Backpack's datatable when you have a large column title. This seems to be a known issue that has been reported and addressed in previous versions of Backpack.

A similar issue was reported in Github Issue #4352, where the ellipsis (three dots) and modal were not showing up correctly when clicked. The issue was fixed in a subsequent release.

To address your specific problem, I would recommend trying the following steps:

1. Ensure you have the latest version of Backpack installed. You're using Backpack CRUD 6.7.50, which is quite recent, but it's always good to check if there's an even newer version available.

2. Clear your application cache and views:

   php artisan cache:clear
   php artisan view:clear
   

3. Republish Backpack's assets:

   php artisan vendor:publish --provider="Backpack\CRUD\BackpackServiceProvider" --tag=public --force
   

4. If the issue persists, you might want to check if you have any custom CSS or JavaScript that could be interfering with the responsive controls.

5. If none of the above steps resolve the issue, it would be helpful to create a minimal reproducible example and report it as a new issue on the Backpack CRUD GitHub repository.

It's worth noting that the behavior of responsive controls and action buttons has changed in different versions of Backpack, so make sure you're following the latest documentation for your specific version.

If the problem continues after trying these steps, I recommend reaching out to the Backpack community or creating a new issue on their GitHub repository with specific details about your setup and screenshots demonstrating the problem.

ℹ️ Please note our AI Bot does not reply to follow-ups, this will be the only AI answer in this thread. If the AI helped you find the answer, please mark it as answered or write details below so it can learn. Then close the conversation. If not, please give more information for when a human reads this. ℹ️

Relevant sources:

Github Issue (closed): Bug on table responsive mode
Github Issue (closed): [Bug] ListOperation modal no longer showing when ellipsis is clicked
Github Issue (closed): [4.0][Bug] Not all options on dropdown button are shown
Github Issue (closed): [Bug] Column visibility display bug with responsive table
Github Issue (closed): [Bug] Column headers width is wrong if responsive table is disabled
Github Issue (open): Bulk actions checkbox is hidden when first column has visibleInTable=false
Github Issue (closed): [BUG] No export buttons on version 3.5
Github Issue (closed): Column headers width is wrong if responsive is disabled and bulk actions are enabled [Bug]
Github Issue (closed): After upgrade the table views have changed (for worse)
Github Issue (closed): [Bug] extra headers disableResponsiveTable
Github Issue (closed): [Bug] Actions Dropdown changes back to line buttons after editable switch is toggled
Github Issue (closed): First column is not shown[Bug]

[dilneiss]

php artisan vendor:publish --provider="Backpack\CRUD\BackpackServiceProvider" --tag=public --force nothing change

[pxpm]

Thanks @dilneiss I will have a look at it, but not sure it's related with the change I made in the other PR. Will see, I will do some testing and get back to you 👍

Cheers

[dilneiss]

@pxpm find anything?

[pxpm]

Hey @dilneiss sorry I did, but I forgot to get back here.

I don't think the issue you are facing relates with the change you mentioned.

From your screenshot I don't think you have responsive table enabled, as I can't see the "three dots" even on the desktop you said it's working.

Regarding the actions buttons not showing on mobile I think there is an issue there, but it will require further investigation.

Can you clarify exactly what's your issue ? (apart from actions not showing on mobile).

Cheers

[dilneiss]

@pxpm I do have the responsive table enabled, the 3 dots appear correctly when I have a column in the list with a smaller number of characters, now if they get too big the 3 dots don't appear :(, both it and the action button..

[falterkofler]

I'm pretty sure that this change caused the issue - If I switch back and forth between backpack-crud 6.7.43 (broken) and 6.7.41 I can make it work again. I think 6.7.42 included the merge #5719

I'm on Laravel 10.48.25 and have several backpack extensions installed.
But for me the problem occurs even on very basic model list views without detail rows. Interestingly it doesn't show if you simulate mobile view in the browser (also with dedicated mobile view extensions that change the user agent) but on my iPhone SE in Chrome + Safari it's definitely there

And thanks for getting back to us @pxpm :)

[dilneiss]

@falterkofler, @pxpm yes, the problem is here right in this code:
src/resources/views/crud/inc/datatables_logic.blade.php

i changed it to as it was before commit and now is showing plus button and actions button.
just need to fix css now, check print

(this is when i refresh in desktop and resize window)

(this is when i refresh in resized window.

please check again

[pxpm]

Thanks, I will take another look at this 👍

[pxpm]

I've spent quite some time trying to reproduce this issue.

Unfortunately I was not able to.

Here are the test I have done:
Create a huge column text, and set the "limit" to 99999 so it doesn't cut the text.

After I resized the window, and tried also changing to mobile:

I notice that you don't have the three dots like I have. Is is possible that you are using a different css than me ?

Do you have files overwritten in your resources/ folder ? Why do you have that green circle ? Is that the responsive plugin or is that the details row ?

The fact the actions disappear for long text columns is an old "issue", not related with any recent changes.

By any chance any of your guys projects are public so that I can have a look at ?

Cheers

[dilneiss]

@pxpm maybe because i am using coreuiv4 theme?
i tested removing all custom css, all exported .blade un resources folder and the problem persists.
i also removed all basset files and reinstalled

when i inspect that plus button, i can see this

coreuiv4 load from here: /assets/basset/vendor/backpack/theme-coreuiv4/resources/assets/css/coreui4.css?19a7d2fc2f12

coreui4.css.txt

and that plus button is comming from here: https://cdn.datatables.net/responsive/2.4.0/css/responsive.dataTables.min.css?19a7d2fc2f12

[pxpm]

@dilneiss thanks for the screenshot. We are getting somewhere. 👍

That's a different output from what I got on my side. On my side, the "three dots" (in your case the green sign), is coming from common.css.

common.css file is loaded before the theme assets in:

CRUD/src/resources/views/ui/inc/styles.blade.php

Line 15 in 36aa24c

@basset(base_path('vendor/backpack/crud/src/resources/assets/css/common.css'))

I am also using coreui-v4 in this screenshot.

Can you figure out why common.css is not properly loading in your installation ?

Cheers

[dilneiss]

@pxpm common.css is loading, check my

[pxpm]

Thanks @dilneiss

Can you check if you have the updated version of common.css ?

Specifically this change:

Cheers

[dilneiss]

@pxpm yes, i have it:

#crudTable_wrapper #crudTable.dtr-none > tbody > tr > td > div.dtr-control:before,
#crudTable_wrapper table.dataTable.dtr-none > tbody > tr > td > div.dtr-control:before {
background-color: transparent;
color: #636161;
font-family: "Line Awesome Free";
font-weight: 900;
width: 1rem;
content: "\f142";
font-size: 21px;
box-shadow: none;
border: none;
display: inline-block;
position: relative;
top: 0;
left: 0;
margin: 0 0 0 -0.25rem;
}

common.css.txt

[pxpm]

Hey @dilneiss I am sorry but I am still unable to reproduce the issue.

It seems something is off on your screenshot in comparison with my results.

As you can see from my screenshot, my <div class="dtr-control" also has the cursor-pointer class, thing that's missing on your screenshot.

That's coming from

CRUD/src/app/Library/CrudPanel/Traits/Search.php

Line 292 in bb6cd6c

$responsiveTableTrigger = '<div class="dtr-control d-none cursor-pointer"></div>';

I've just created a new application to make sure it "should" be working as expected, can you please install this project https://github.com/pxpm/testbug and reproduce there the issue ?

Cheers

[dilneiss]

@pxpm i found the problem, try adding CRUD::column('id')->type('number')->label('ID')->priority(5); (any priority)

[pxpm]

Thanks @dilneiss , but that still doesn't break it for me:

I suspect the issue is some core view you have published in your resources/ folder that is not updated with core Backpack code.

You can check on the project I shared, I added the id column there: pxpm/testbug@c59f8cc

Can you reproduce your issue in that project ?

[dilneiss]

@pxpm you have to resize your window to a smaller one, i made this bug on your project https://github.com/pxpm/testbug

[pxpm]

Thanks a lot @dilneiss for the time spent helping me figuring out the issue 🙏 Also thanks @falterkofler 🙏

I was able to reproduce it, and fixed it in 6.7.52, dtr-controls should now always be positioned at the first visible column.

I also bumped into the "green icon" issue, I was able to fix it by doing a php artisan view:clear

Let me know if things are working now for you after the update.

Cheers

[falterkofler]

That's great news, thank you guys for staying on it, I'm so stuffed with work atm I couldn't find the time to provide further help
Thank you @dilneiss @pxpm !

[dilneiss]

thanks @pxpm we are almost there!
but still something is wrong, check my print

[pxpm]

Thanks @dilneiss sorry I've tested this in the testbug app that has only one entry and missed that detail.

I've fixed it in 6.7.54, you can run a composer update and then a php artisan view:clear to make sure everything works as expected. 👍

Cheers

[AmrSubZero]

Thanks @dilneiss sorry I've tested this in the testbug app that has only one entry and missed that detail.

I've fixed it in 6.7.54, you can run a composer update and then a php artisan view:clear to make sure everything works as expected. 👍

Cheers

i ran composer update backpack/crud but php artisan view:clear didn't do the job, it still used the old common.css

i had to run this :

php artisan basset:clear

so the new common.css from the new update becomes available at the storage/app/public/basset as documented here

now i can see the three dots again!

Thank you!

[dilneiss]

@pxpm thankyou! everything works now!
we have just a one small bug.. this is old.. we wave 2 checkboxes:
Wich one we should select for bulk delete?

[pxpm]

Let me have a look to check if the checkbox need fix too 👍

[pxpm]

done @dilneiss removed the checkboxes from single entry view.

There is a possibility we may add the checkbox back, and link it with the column checkbox, but that would require quite a bit more work that we cannot spend time on now.

If you tackle it, feel free to submit a PR and we will review it 👍

Thanks for your time and effort once again 🙏