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

image

After

after

API changes

NA

Data model changes

NA

Release notes snippet

Issue fork drupal-3404663

Command icon 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

shweta__sharma created an issue. See original summary.

shweta__sharma’s picture

Status: Active » Needs review
nitin shrivastava’s picture

StatusFileSize
new16.08 KB

@shweta__sharma MR#2 applied successfully.

Example

nitin shrivastava’s picture

Status: Needs review » Reviewed & tested by the community
quietone’s picture

Issue summary: View changes

I'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.

shweta__sharma’s picture

Issue summary: View changes
StatusFileSize
new923.07 KB

Added after fix screenshot in IS
Thanks

nod_’s picture

gauravvvv’s picture

Status: Reviewed & tested by the community » Needs work
StatusFileSize
new327.36 KB

I 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.

Gauravvvv changed the visibility of the branch 3404663-olivero-show-content to hidden.

gauravvvv’s picture

Status: Needs work » Needs review
StatusFileSize
new818 bytes

I 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.

smustgrave’s picture

Status: Needs review » Needs work
Issue tags: +Needs issue summary update

If 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.

tanuj.’s picture

Issue summary: View changes

tanuj.’s picture

Status: Needs work » Needs review

Created new branch and MR for second solution also updated Issue summary. Please review.

smustgrave’s picture

shweta__sharma’s picture

Issue summary: View changes
Issue tags: -Needs issue summary update

Added both the approaches in the IS with the MR link.

Thanks

smustgrave’s picture

Status: Needs review » Needs work

MR has failures.

aayushmankotia changed the visibility of the branch 3404663-content-preview-checkbox-alignment to hidden.

aayushmankotia changed the visibility of the branch 3404663-content-preview-checkbox-alignment to hidden.

ahsannazir made their first commit to this issue’s fork.

ahsannazir’s picture

Status: Needs work » Needs review

aayushmankotia changed the visibility of the branch 3404663-content-preview-checkbox-alignment to active.

aayushmankotia changed the visibility of the branch 3404663-olivero-show-content to active.

kanchan bhogade’s picture

StatusFileSize
new17.23 KB
new17.84 KB
new12.62 KB
new13.42 KB

Hi
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

sdhruvi5142’s picture

Status: Needs review » Reviewed & tested by the community
StatusFileSize
new294.13 KB
new265.02 KB
new81.11 KB

Hi, 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

  • nod_ committed 572e3275 on 11.x
    Issue #3404663 by shweta__sharma, Tanuj., Gauravvvv, sdhruvi5142, Nitin...

  • nod_ committed 131a9c06 on 10.3.x
    Issue #3404663 by shweta__sharma, Tanuj., Gauravvvv, sdhruvi5142, Nitin...

  • nod_ committed 6881cf41 on 10.2.x
    Issue #3404663 by shweta__sharma, Tanuj., Gauravvvv, sdhruvi5142, Nitin...
nod_’s picture

Version: 11.x-dev » 10.2.x-dev
Status: Reviewed & tested by the community » Fixed
Issue tags: -Needs subsystem maintainer review

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!

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.