[5.x]: VueAdminTable visual anomalies when viewed in a slideout

[jamie-s-white]

What happened?

Description

I have added a VueAdminTable to a slideout, and there are various front end issues with how my content displays:

1. The content goes below the pagination
2. In Craft 4, there is a blue box that displays around the content area (this is fixed when I run this code under Craft 5)
3. I see see no way to remove the cancel and save buttons, even though with my use case, they serve no purpose, and I would like to remove them

Steps to reproduce

1. Install the module I will email you separately
2. Navigate to any entry, asset or category
3. Click on the "show related elements" button I have injected into the right hand toolbar
4. You will see the visual anomalies I have described above

Expected behavior

1. Content not to go below the pagination
2. No blue box, or blue box is constrained to the actual content area (probably after 1) is fixed)
3. Ability to remove those two buttons

Actual behavior

Here is our related elements button (in the bottom right):

Once clicked, it displays this (please note, the content going under the pagination):

In Craft 4, there is an additional blue box around the content area that goes under the column headings and pagination:

Evidently, when running this code under both Craft 4 and 5 there are cancel and save buttons we do not want.

I was hoping that adding ->action(false) to my return $this->asCpScreen() call would remove those buttons, but this turned out not to be the case. I could find no other way to achieve this looking through the documentation and reading the source code for Craft CMS.

I was originally asking about these issues on the discord, where @lindseydiloreto mentioned he had run into similar issues he was unable to solve.

I will wetransfer my module code shortly after opening this bug report.

Craft CMS version

5.7.3 and 4.14.10

PHP version

8.3

Operating system and version

Servd

Database type and version

MySQL 8

Image driver and version

N/A

Installed plugins and versions

• We are running this on both a barebones project, and a project with the following plugins:

  "craftcms/ckeditor": "^4.0",
  "craftcms/cms": "^5.6.0",
  "craftcms/feed-me": "6.7.0",
  "craftpulse/craft-colour-swatches": "^5.0",
  "doublesecretagency/craft-cpcss": "^3.0",
  "mmikkel/cp-field-inspect": "^2.0",
  "nystudio107/craft-retour": "^5.0",
  "servd/craft-asset-storage": "^4.0.9",
  "spicyweb/craft-odds-and-ends": "^5.0",
  "studioespresso/craft-scout": "^5.0",
  "supercool/craft-vite": "^2.0",
  "supercool/fetch": "^4.0.1",
  "supercool/scheduler": "^4",
  "topshelfcraft/wordsmith": "^5.0",
  "verbb/buttonbox": "^5.0",
  "verbb/color-mixer": "^4.0",
  "verbb/default-dashboard": "^3.0",
  "verbb/super-table": "^4.0",
  "verbb/tablemaker": "5.0.5",
  "vlucas/phpdotenv": "5.6.1"

[brandonkelly]

Thanks for reporting that! Craft 4.15.3 and 5.7.5 are out with a fix to the admin table styling.

And I just made it possible to create slideouts that aren’t wrapped in a <form> + don’t have “Save” buttons, for Craft 5.8 (see #13593 (comment)).