Misaligned messages status

It looks like this patch has already been committed to core, is that correct?

Interesting, seems to work.

Committed and pushed to 8.x. Thanks!

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

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

You 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 :-)

OK, 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.

Let's get rid of the 2em margin. I think it was only introduced to attempt to fix the messages placement.

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

I have applied a patch manually, Messages are aligned now. Refer screenshots

#8
I had tested this patch on my local machine .But its not working

line no.- 1105
File:- views_ui.admin.theme.css

we can add this code for alignment of error.

div.messages {
margin-left: 8px;
}

Resetting 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 :)

Also found in #2318381: Message not styled properly on interface translation page , descoped from there in favor of this issue.

There is a patch on #2277427: Messages are not aligned. (12) that may help this issue.

This issue still needs a summary update about what needs to happen :)

Updated the issue summary, so removing the tag. Also adding the RTL tag.

Here's the patch from #2277427.

Reviewed... this looks sane to me.

@jaredsmith, could you provide some screenshots and the browsers you used to check it, please?

The 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

Since 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

Screenshots after applying patch:

I can confirm that it looks great in LTR, but I found this in Bartik in RTL

Fixed the RTL issue.

I've reviewed this as well, and it looks good in both regular and RTL. I think it's ready to be committed.

Committed 3e53bf2 and pushed to 8.0.x. Thanks!

Added the LTR comment on commit.

diff --git a/core/themes/bartik/css/style.css b/core/themes/bartik/css/style.css
index 1e53eb6..fcdebc1 100644
--- a/core/themes/bartik/css/style.css
+++ b/core/themes/bartik/css/style.css
@@ -1372,7 +1372,7 @@ div.tabs {
   background: rgba(30, 50, 10, 0.08);
 }
 div.messages {
-  margin: 8px 15px 8px 23px;
+  margin: 8px 15px 8px 23px; /* LTR */
 }
 [dir="rtl"] div.messages {
   margin-right: 23px;