`BulkActions` CSS issue with checkboxes under the "Submissions" section

pjayme commented 4 months ago

Module version(s) affected

5.15

Description

There is a misalignment with the positioning of the checkboxes associated to the BulkActions component which reveals itself when the viewport height of the browser window is not high enough to display a list of records from the GridField:

How to reproduce

Install version 5.15 of this module
In the CMS, create a UserDefinedForm with some basic fields
Access the form on the front-end and perform a number of test submissions
In the CMS, access the "Submissions" section of the form
Assuming a number of submissions have been made, lets say around 20-25 reduce the height of the browser window so that vertical scrolling is introduced.
When vertical scrolling is visible, scroll down to the bottom of the page, you should see the BulkAction checkboxes act like they are "floating" and therefore cause misalignment against the rows of the GridField

Possible Solution

We have gotten around this issue by introducing our own stylesheet for the CMS and targeting the breaking element. We assume this issue applies to all BulkAction components but in our case we have restricted it to the "Submissions" area of the UserDefinedForms to prevent any further regressions.

In cms.css:

[data-name="Submissions"] {
  .bulkSelectAll,
  .bulkSelect {
    position: relative;
    margin-top: 0;
    margin-left: 0;
  }
}

Acceptance criteria

Checkboxes on the submission tab are aligned with their row.
~The first user field is not chopped off~
~The history table does is flush with the main area~
Bug is fixed in CMS 5 only.

Additional Context

No response

Validations

[X] Check that there isn't already an issue that reports the same bug
[ ] Double check that your reproduction steps work in a fresh installation of silverstripe/installer (with any code examples you've provided)

PRs

https://github.com/colymba/GridFieldBulkEditingTools/pull/286

emteknetnz commented 4 months ago

Do you know if this is still an issue in 6.2 of the module in CMS 5?

pjayme commented 4 months ago

Do you know if this is still an issue in 6.2 of the module in CMS 5?

Nope, didn't have a chance to sorry, our codebase is still running on CMS 4, so could only go as high as 5.15

maxime-rainville commented 4 months ago

Validated this is still a problem on CMS 5. It looks like it only affects the UserForm elemental block ... couldn't replicate it on the regular user form page.

There appear to be other visual regression on this page.

The first user field row gets shopped off

The history table has a weird padding

maxime-rainville commented 4 months ago

@GuySartorelli says there's another issue to handle the other two CSS inconsistencies. So we just need to deal with the checkboxes.

GuySartorelli commented 4 months ago

@GuySartorelli says there's another issue to handle the other two CSS inconsistencies. So we just need to deal with the checkboxes.

https://github.com/dnadesign/silverstripe-elemental-userforms/issues/71

GuySartorelli commented 4 months ago

There is no "BulkActions" css class nor any associated checkboxes in this module nor in dnadesign/silverstrupe-elemental-userforms. I assume some additional module is being used to add those.

@pjayme You ticked the "Double check that your reproduction steps work in a fresh installation of silverstripe/installer" checkbox.... but you haven't provided reproduction steps that will introduce the checkboxes.

Please provide all of the information required to reproduce this bug.

pjayme commented 4 months ago

There is no "BulkActions" css class nor any associated checkboxes in this module nor in dnadesign/silverstrupe-elemental-userforms. I assume some additional module is being used to add those.

@pjayme You ticked the "Double check that your reproduction steps work in a fresh installation of silverstripe/installer" checkbox.... but you haven't provided reproduction steps that will introduce the checkboxes.

Please provide all of the information required to reproduce this bug.

@GuySartorelli ah I had thought this was all part of the module but indeed on second look it looks like the .bulkSelectAll class is coming from a module called colymba/gridfield-bulk-editing-tools which in our project is pulled in by silverstripe/recipe-blog

Another thing to note is that colymba/gridfield-bulk-editing-tools is suggested in the composer.json of silverstripe-userforms.

GuySartorelli commented 4 months ago

Thanks for that extra detail. I'll look into this.

In this case since colymba/gridfield-bulk-editing-tools is a supported module and I'm gonna work on it right away it's easier to just keep this issue open where it is.

emteknetnz commented 4 months ago

Linked PR has been merged, it will be automatically tagged shortly. Note that it's fixed on the 4.0 branch which is for CMS 5

silverstripe / silverstripe-userforms