Modal plus sign button overlaps first column in list after upgrading to Pro

[abrothman-vacatia]

The Pro features are worth every Euro, but I see a strange artifact:

After the upgrade, the round green plus button (that opens a modal view for the row) overlaps the text of the first column.

How can I fix this?

[backpack-ai-bot[bot]]

Based on the information provided in the knowledge sources, it appears that there have been some issues with modals and column display in Backpack, particularly after upgrades. While I don't have an exact match for your specific problem, I can provide some relevant information and potential solutions:

1. There was a similar issue reported where the details row icon was appearing in the first column of the modal view. This was fixed in a recent pull request. GitHub Issue #5284

2. Another related issue was about wrong first column height after upgrading to version 6.x. GitHub Issue #5267

To address your specific problem, you could try the following:

1. Ensure you're running the latest version of Backpack Pro. Some modal-related issues have been fixed in recent updates.

2. If the problem persists, you might need to adjust the CSS for the first column or the modal button. You could try adding some padding or margin to the first column to prevent overlap.

3. If you're comfortable with making code changes, you could inspect the HTML structure of your list view and see if there's any misalignment causing the overlap.

4. As a last resort, you might want to consider creating a custom view for your list operation to have more control over the layout.

If these suggestions don't solve your issue, I recommend reporting this as a new bug on the Backpack GitHub repository, as it seems to be a specific problem not covered in the provided knowledge sources.

GitHub CRUD Issues

Remember to include details about your Backpack version, Laravel version, and any custom modifications you've made to your list view when reporting the issue.

ℹ️ 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): Summernote field: add link modal is behind overlay
Github Issue (closed): Column row_number hides the expand icon of DetailsRow
Columns|Define which columns to show or hide in the responsive table
Github Issue (closed): Hide "+ Add" button on table field when the max is reached
Github Issue (closed): export button : top of grid ?
Github Issue (closed): [Bug] DataTable row colors are changed and a little broken now
Add Responsive Table Modal Padding
Github Issue (closed): [Bug] Wrong first column height
Github Issue (closed): addColumn(visibleInModal=>false) after addColumn(visibleInTable => false) : Error in modal view.
Github Issue (closed): [4.0][Known Bug] Modals won't show correctly in v4
Editable Columns|1.0.5 01-Dec-2021
Fix: Table modal display the details row icon in the first column.
PRO for unlimited projects|1.6.0 31-Jan-2023
Github Issue (closed): [Bug] table modal display the details row icon in the first column.

[karandatwani92]

Hey @abrothman-vacatia

Can you help to reproduce the issue? So we can try to fix it.

I checked the demo's monster CRUD on all the themes. It's working as expected. Maybe you need to update the installed theme. Try running composer update.

[abrothman-vacatia]

That's odd - that made the plus signs disappear completely. That's fine, but is it expected behavior? Where can I see docs about this modal?

[karandatwani92]

You can find modal & column visibility APIs here:

• Choose Where Columns are Visible
• Define which columns to show or hide in the responsive table

Feel free to ask if I missed anything.