Problem/Motivation
During the placing of some blocks through the layout builder in the custom block, I noticed that show content preview checkbox alignment looks off with other submit buttons in the layout builder. the show content preview checkbox is not center aligned with the other buttons of the layout builder form. According to me, it should be centred-aligned with the other buttons too for a better user interface.
Steps to reproduce
- Go to /admin/structure/types/manage/article/display/default/layout
- Check the show content preview checkbox and its alignment
Please refer to the screenshot attached for reference.
Proposed resolution
Solution 1 -
Adding extra block margin in .form-type-boolean class to make the checkbox centered.
https://git.drupalcode.org/project/drupal/-/merge_requests/5573
Solution 2 -
Using align-items attribute on .form-actions class to make the checkbox centered.
https://git.drupalcode.org/project/drupal/-/merge_requests/6747
Remaining tasks
- Review
- Commit
User interface changes
Before

After

API changes
NA
Data model changes
NA
Release notes snippet
| Comment | File | Size | Author |
|---|---|---|---|
| #26 | Before-After_Increspace.png | 81.11 KB | sdhruvi5142 |
| #26 | Beforepatch.png | 265.02 KB | sdhruvi5142 |
| #26 | Afterpatch.png | 294.13 KB | sdhruvi5142 |
| #11 | 3404663-9.patch | 818 bytes | gauravvvv |
| #9 | Screenshot 2024-02-22 at 9.26.29 AM.png | 327.36 KB | gauravvvv |
Issue fork drupal-3404663
Show commands
Start within a Git clone of the project using the version control instructions.
Or, if you do not have SSH keys set up on git.drupalcode.org:
Comments
Comment #3
shweta__sharma commentedComment #4
nitin shrivastava commented@shweta__sharma MR#2 applied successfully.
Comment #5
nitin shrivastava commentedComment #6
quietone commentedI'm triaging RTBC issues. I read the IS and the comments. I didn't find any unanswered questions or other work to do. It took me a while to figure out that the image in the 'user interface changes' section of the issue summary is the before image not the after image.
For issues that are changing the UI it is helpful to have the before and after images in the issue summary, or links to the latest before and after screenshots.
Leaving at RTBC.
Comment #7
shweta__sharma commentedAdded after fix screenshot in IS
Thanks
Comment #8
nod_Comment #9
gauravvvv commentedI have tested merge request !5573, and here are my observations: In the case of the sidebar, the checkbox item is wrapped onto the next line, and the spacing is increased even if we don't want that, as the alignment is already fine on the next line. I have attached a screenshot for reference.
Comment #11
gauravvvv commentedI have provided a separate patch with a different approach. I'm not updating the current merge request, so the maintainer can choose any approach they prefer.
Comment #12
smustgrave commentedIf a different solution is going to be used it should be reflected in the issue summary. #11 doesn't mention what the new solution is.
A separate MR should be opened and in the issue summary have something like
Option A
Option B
So discussion can be had about best approach.
Comment #13
tanuj. commentedComment #15
tanuj. commentedCreated new branch and MR for second solution also updated Issue summary. Please review.
Comment #16
smustgrave commentedComment #17
shweta__sharma commentedAdded both the approaches in the IS with the MR link.
Thanks
Comment #18
smustgrave commentedMR has failures.
Comment #22
ahsannazir commentedComment #25
kanchan bhogade commentedHi
I've tested MR !6747 on Drupal 11.x
The patch is applied successfully...
my observations:
The checkbox is center-aligned with the layout builder buttons.
In the case of the sidebar- The checkbox wrapped onto the next line, Spacing is not changed.
Adding Screenshots
Comment #26
sdhruvi5142 commentedHi, verified and tested MR !6447 and applied Patch successfully on 11.x version. And all the changes are working as expected.
Following steps I followed:
For scenario 1 "Checkbox alignment"
1. Open local and Install Oliverio theme
2. Go to /admin/structure/types/manage/article/display/default/layout
3. Checked the show content preview checkbox and its alignment and observed the changed here
Testing Result for Scenario 1:
The Alignment of the "Show content preview" looks proper as expected.
Attaching the SS for reference.
For Scenario 2 " When sidebar is added spacing issue"
1. Go to /admin/structure/types/manage/article/display/default/layout
2. Added the Sidebar in the Layout
3. Now observed the changes here
Testing result for Scenario 2:
The spacing looks as expected when we add the side bar and "Show content preview" Checkbox displayed in next line
Attaching the SS for reference.
Hence moving to RTBC!
Thanks
Comment #32
nod_went with align:middle since it works and I don't want to add yet another variable.
Committed 572e327 and pushed to 11.x. Thanks!