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

[pjayme]

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

1. Install version 5.15 of this module
2. In the CMS, create a UserDefinedForm with some basic fields
3. Access the form on the front-end and perform a number of test submissions
4. In the CMS, access the "Submissions" section of the form
5. 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.
6. 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

• 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

• colymba/GridFieldBulkEditingTools#286

[emteknetnz]

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

[pjayme]

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]

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]

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

[GuySartorelli]

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

dnadesign/silverstripe-elemental-userforms#71

[GuySartorelli]

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]

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]

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]

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