Support for Drupal 7 is ending on 5 January 2025—it’s time to migrate to Drupal 10! Learn about the many benefits of Drupal 10 and find migration tools in our resource center.
Problem/Motivation
The left edge of the messages is misaligned.
Proposed resolution
Simple: align the messages correctly. #2277427 was doing the exact same thing. I closed this issue, to make sure we're only doing this once.
Before:
After:
Remaining tasks
- Get the patch from #2277427 and apply it here.
- Make sure the patch works, and that it supports both ltr
and rtl
languages.
User interface changes
The left egde of the messages is aligned with the content.
API changes
None.
Original report by @droplet
Left edge is misaligned
Before:
After:
Comment | File | Size | Author |
---|---|---|---|
#39 | misaligned-rtl-fix.png | 41.14 KB | herom |
#39 | misaligned-messages-2220905-39.patch | 503 bytes | herom |
#39 | interdiff-2220905-35-39.txt | 513 bytes | herom |
#38 | Screenshot 2014-10-17 13.52.50.jpg | 528.62 KB | LewisNyman |
#36 | 2.png | 21.72 KB | skippednote |
Comments
Comment #1
OostieIt looks like this patch has already been committed to core, is that correct?
Comment #2
droplet CreditAttribution: droplet commentedNope, not yet
Comment #3
Bojhan CreditAttribution: Bojhan commentedInteresting, seems to work.
Comment #5
webchickCommitted and pushed to 8.x. Thanks!
Comment #6
mcjim CreditAttribution: mcjim commentedWarning and error messages also need to be aligned.
It might be better to follow Bartik's example add the margin to .messages rather than the individual .messages--[type] classes.
Comment #7
droplet CreditAttribution: droplet commented@mcjim,
what is your browser and theme. I wonder why 2nd & 3rd are aligned well (without applying fixes). ( I assumed there're sharing same code )
Comment #8
droplet CreditAttribution: droplet commentedComment #9
mcjim CreditAttribution: mcjim commentedThat screenshot was from Safari 7.0.2 and Seven theme, and yes it's awkwardly different to everything else! I can have a look into that if you don't have access to a Mac.
Comment #10
droplet CreditAttribution: droplet commentedYes, please. It's my Mac screenshot, same errors.
Comment #11
mcjim CreditAttribution: mcjim commentedYou can ignore my comment about Safari. I was being an idiot and had a couple of patches on the go…
Just waiting for the coffee to kick in and I'll review your latest patch :-)
Comment #12
mcjim CreditAttribution: mcjim commentedOK, patch is looking good in Seven, except for the node/add pages.
#console
has 2em of margin in core/themes/seven/style.css, which was added in #2095275: Space above add content form with no overlay. I'm not sure of the consequences of removing it.Comment #13
LewisNymanLet's get rid of the 2em margin. I think it was only introduced to attempt to fix the messages placement.
Comment #14
mcjim CreditAttribution: mcjim commentedI've been thinking about this and the alternative approach to lining-up taken in #2213583-31: Misaligned Icons in Drupal 8.x, which adds margin to #console in core/themes/seven/style.css, instead.
I think I'm in favour of this, as it's theme-specific, and the lining-up should be theme-specific. Removing the margin on .messages in system.theme.css will mean less to override in custom themes.
So it might be best to roll back the commit in #5 and work on refining #2213583: Misaligned Icons in Drupal 8.x, instead (sorry!).
The only problem I'm aware of at the moment will be the AJAX error pages, where the messages are printed out as the main content of the page and not in #console, so we would need to add margin elsewhere to line those up (in Seven, at least).
Comment #15
Manjit.SinghI have applied a patch manually, Messages are aligned now. Refer screenshots
Comment #16
Sumit kumar CreditAttribution: Sumit kumar commented#8
I had tested this patch on my local machine .But its not working
Comment #17
Sumit kumar CreditAttribution: Sumit kumar commentedline no.- 1105
File:- views_ui.admin.theme.css
we can add this code for alignment of error.
div.messages {
margin-left: 8px;
}
Comment #18
LewisNymanComment #19
emma.mariaResetting this to needs work as the things discussed in #13 and #14 were not implemented.
It would be good to get fresh opinions from @lewisnyman and @mcjim on the next steps for this patch as things wandered off a bit.
Also tag with Novice if it's nice and straight forward please :)
Comment #20
emma.mariaComment #21
jaredsmith CreditAttribution: jaredsmith commentedComment #22
Gábor HojtsyAlso found in #2318381: Message not styled properly on interface translation page , descoped from there in favor of this issue.
Comment #23
pbz1912 CreditAttribution: pbz1912 commentedComment #24
pbz1912 CreditAttribution: pbz1912 commentedThere is a patch on #2277427: Messages are not aligned. (12) that may help this issue.
Comment #25
GemVinny CreditAttribution: GemVinny commentedThis issue still needs a summary update about what needs to happen :)
Comment #26
sqndr CreditAttribution: sqndr commentedComment #27
sqndr CreditAttribution: sqndr commentedUpdated the issue summary, so removing the tag. Also adding the RTL tag.
Comment #28
sqndr CreditAttribution: sqndr commentedHere's the patch from #2277427.
Comment #29
G-raph CreditAttribution: G-raph commentedComment #30
G-raph CreditAttribution: G-raph commentedComment #31
jaredsmith CreditAttribution: jaredsmith commentedReviewed... this looks sane to me.
Comment #32
rteijeiro CreditAttribution: rteijeiro commented@jaredsmith, could you provide some screenshots and the browsers you used to check it, please?
Comment #34
skippednote CreditAttribution: skippednote commentedThe message boxes are looking fine in Seven however there is an alignment issue in Bartik.
Current message box in Bartik
Attached are the screenshot fixed message boxes
Comment #35
skippednote CreditAttribution: skippednote commentedSince the box-shadow doesn't transform layout the box-shadow is bleeding to the left and not pushing message box with it.
margin: 8px 15px 8px 23px;
15px margin + additional 8px for the box-shadow being applied to message box
Comment #36
skippednote CreditAttribution: skippednote commentedScreenshots after applying patch:
Comment #37
LewisNymanI can confirm that it looks great in LTR, but I found this in Bartik in RTL
Comment #38
LewisNymanComment #39
herom CreditAttribution: herom commentedFixed the RTL issue.
Comment #40
jaredsmith CreditAttribution: jaredsmith commentedI've reviewed this as well, and it looks good in both regular and RTL. I think it's ready to be committed.
Comment #41
alexpottCommitted 3e53bf2 and pushed to 8.0.x. Thanks!
Added the LTR comment on commit.
Comment #43
skippednote CreditAttribution: skippednote commented