Why is email not centered on Android 4.4?

JW

22

James White replied 2015-09-18 18:53:24

Problem solved!

https://blog.jmwhite.co.uk/2015/09/19/revealing-why-emails-appear-off-centre-in-android-4-4-kitkat

Add this to your head CSS and see if removes the margin.

body { margin:0 !important; }
div[style*="margin: 16px 0"] { margin:0 !important; }

Due to the lack of id or class, you can't target that div wrapper specifically without using attribute selectors (and even with that its a hack), the body is the main area to neutralise because its the element creating the side margin, the div creates additional and potentially unwanted margin on the top and bottom as well. See below for the explanation of what's going on.

Delicious Source Code

After some source code diving into the Android 4.4 email app (which due to Android being Open Source is rather easy!), I've found the cause of this. This is an actual function in one of the many Java classes, specifically part of the SecureConversationViewController.java file.

Note how the wrapping body tag has been defined, there is also div with margin:16px 0; applied. This appears to match the behaviour we are seeing with all sides except the right having margins. Except, the shorthand written in the code should be only applying it to the top and bottom, having 0 declared for the right side means the same value should be used for the left right? Correct, because the wrapper div isn't causing the side margin, the body tag is. Notice the %s, that's a placeholder for a px value which is calculated during rendering the message view, the side margin is actually being applied there.

The technical stuff

This is the actual Java source code where the body and div wrapper is generated

Android 4.4 body and wrapper

public void renderMessage(ConversationMessage conversationmessage)
    {
        mMessage = conversationmessage;
        conversationmessage = mWebView.getSettings();
        boolean flag;
        if (!mMessage.alwaysShowImages)
        {
            flag = true;
        } else
        {
            flag = false;
        }
        conversationmessage.setBlockNetworkImage(flag);
        conversationmessage = new StringBuilder(String.format("<body style=\"margin: 0 %spx;\"><div style=\"margin: 16px 0; font-size: 80%%\">", new Object[] {
            Integer.valueOf(mSideMarginInWebPx)
        }));
        conversationmessage.append(mMessage.getBodyAsHtml());
        conversationmessage.append("</div></body>");
        mWebView.loadDataWithBaseURL(mCallbacks.getBaseUri(), conversationmessage.toString(), "text/html", "utf-8", null);
        conversationmessage = ConversationViewAdapter.newMessageHeaderItem(null, mDateBuilder, mMessage, true, mMessage.alwaysShowImages);
        mMessageHeaderView.unbind();
        mMessageHeaderView.bind(conversationmessage, false);
        if (mMessage.hasAttachments)
        {
            mMessageFooterView.setVisibility(0);
            mMessageFooterView.bind(conversationmessage, mCallbacks.getAccountUri(), false);
        }
    }

Side margin calculation

In addition, this Java file also contains a variable value which is based on a certain calculation of two values.

mSideMarginInWebPx = (int)((float)bundle.getDimensionPixelOffset(0x7f09001b) / bundle.getDisplayMetrics().density);

This is where the additional margin value is coming from, it is based on an Offset divided by Destiny, which will vary based on each device.

http://developer.android.com/reference/android/content/res/Resources.html#getDimensionPixelOffset%28int%29
http://developer.android.com/reference/android/content/res/Resources.html#getDisplayMetrics%28%29
http://developer.android.com/reference/android/util/DisplayMetrics.html#density

Reply to James White

VW

2

Veronica Williams replied 2016-03-01 17:20:29

I love this fix and have been using it for some time, however when testing this week my emails are cutting off on the right again with spacing on the left. [booooooo] Have you heard of any changes?

RE

1

Ryan Escamilla replied 2016-03-01 18:48:07

I have been having the same issue.

TG

0

Ted Goas replied 2015-09-20 16:17:16

Thank you for taking your swiss army knife and cutting open email clients like this! I've just dropped in your code and can confirm that it works! Cheers James!

MR

0

Mark Robbins replied 2015-09-21 11:43:28

Nice one for all the research and great solution.

MG

0

Michael Guinoo replied 2016-02-10 01:48:11

Awesome fix! Thanks for the tip!

RS

0

R Stones replied 2017-02-21 14:25:09

Well done James! This fixed my issue!

CM

0

Connor McCarra replied 2018-01-09 15:10:45

This solution doesn't appear to be working anymore. Does anyone have an alternative?

JW

2

James White replied 2015-09-18 10:48:40

I've noticed this as well. The original link by OP is 404, but I think this what is being referred to:

Top and Left side:

Android 4.4 additional padding/margin left side

Right side:

Bottom side:

Using a bit of selector magic with CSS you can see where the space is coming from visually:

* { background-color: rgba(255,0,0,.2); }
* * { background-color: rgba(0,255,0,.2); }
* * * { background-color: rgba(0,0,255,.2); }
* * * * { background-color: rgba(255,0,255,.2); }
* * * * * { background-color: rgba(0,255,255,.2); }
* * * * * * { background-color: rgba(255,255,0,.2); }

The pink outer colour is the space Android 4.4 is adding, the next inner layer is the padding of the actual email template.

The padding/margin appears to be added to the top, left and bottom sides. The fact this is happening on the left side without being equally set on the right side is causing the problem and makes the email overall slightly off centre. This is obviously being done by some form of wrapping element within the email client. I'm not sure at this point what that is and if it can be overruled by some CSS or layout change.

Like Nicole, investigation ongoing!

Edit #1: Appears to be some form of div element. Using a rather generic and global CSS rule div { margin:0 !important; padding:0 !important; }, this removed the top and bottom additional margin/padding, the left side still remained however. Further work is needed to try and find out what specific elements are in use and if any id or class can be used to specifically target Android 4.4

Edit 2: See my other post which exposes where the issue is happening in the email app source code

Reply to James White

NM

2

Nicole Merlin replied 2015-09-21 00:24:10

You are a magician! Thanks so much for working all this out! I am eternally grateful.

FU

2

Freemium User replied 2017-01-08 16:36:07

Two things did it for me:

Horizontal fix: body { margin: 0 !important; padding: 0; ... }
Vertical fix: body > div { margin:0 !important; } /*was enough to remove the space above*/

Reply to Freemium User

SS

1

Sava Stankovic replied 2016-09-09 20:58:12

This solution appear not to be working anymore, I tried everything and nothing works.

Reply to Sava Stankovic

HN

0

Huken Nuken replied 2018-01-10 18:05:54

Not found dear

Reply to Huken Nuken

JA

0

Jared Aust replied 2016-11-17 15:55:38

I added negative margin, which fixed the issue. Try adding to your wrapper or body tag margin: -20px !important; padding: 0 !important;

Reply to Jared Aust

RE

0

Ryan Escamilla replied 2015-09-14 18:37:20

I have had this issue since the upgrade from 4.2 to 4.4 in litmus but haven't investigated.

Reply to Ryan Escamilla

NM

0

Nicole Merlin replied 2015-09-17 06:28:09

I can't access the results at your link, but I think I know what you're talking about. It's like the body has margin or padding on it that cannot be removed (kinda like Outlook 2007/10/13).

I've tried so many different things to get rid of this: zeroing margins, zeroing padding, using min-width, trying 0px -webkit-margin-before/after/start/end, all to no avail.

My attempts are ongoing!

Reply to Nicole Merlin

MA

0

Mussa Ali replied 2018-05-03 15:45:33

Excellent

Reply to Mussa Ali

FB

-1

Filip Bisp replied 2016-01-05 10:19:58

my experience is that Google changed the way the client renders HTML. From what I've read/heard is that they're trying to migrate the platform into Gmail, thus it has some querks(like Gmail)

The fix is pretty simple, but have a major impact on how I do emails and thus I haven't myself implemented this myself because I think it's stupid and counterproductive in the end (as they will probably change it again soon in the future)

The fix:
Instead of writing your mobile responsive code like break classes, width and so, on TD's, you have to write it on Tables. That basically means each time you have 2 blocks you want to seperate on mobile, you have to incase them both in Tables and write the mobile responsive code on these specific tables.

Reply to Filip Bisp

Why is email not centered on Android 4.4?

Problem solved!

Delicious Source Code

The technical stuff

Android 4.4 body and wrapper

Side margin calculation

Top and Left side:

Right side:

Bottom side:

Sign in to Community

Join the Litmus Community

Sign up to Community

Get more out of your Litmus account

Forgot password