Text does not align

[laurynnlowe]

Text alignment does not work: although it is possible to change text alignment to center, justify, or right and tags look correct, alignment is reset to left (1) in HTML preview, and (2)when email is sent.

[themak1985]

Same issue here Drupal 7, Civi 4.7.30, Mosaico Beta 3

[stesi561]

We've encounted the same issue - Mosaico Beta 2 - as a temporary work around it looks like you can use a div instead of a paragraph and the text alignment works as expected. Formats-> Blocks -> Div.

[simonjohnparker]

Same issue here WordPress 5.2.1, CiviCRM 5.13.4 and Mosaico 2.0 stable. Everything looks and saves fine within Mosacio when text is centred, but HTML preview or opening in Gmail it appears left aligned. Managed to work around with @stesi561 suggestion - thanks very much!

[artfulrobot]

Still issue with 2.1.

[agileware-pengyi]

We found the same issue. The solution from @stesi561 works.
Just noting that this was an issue for Mosaico(js) before version 0.16. Discussed in this issue.
CiviCRM integrated Mosaico(js) version 0.14. So, the problem is not fixed in CiviCRM.

Agileware ref: CIVIMOSAIC-24

[samuelsov]

I can confirm that the PR voidlabs/mosaico@ed38839 is fixing this. (applied on packages/mosaico/dist/mosaico.min.js.map for a quick fix).

[Shwele]

I can confirm that the PR voidlabs/mosaico@ed38839 is fixing this. (applied on packages/mosaico/dist/mosaico.min.js.map for a quick fix).

@samuelsov Can you guide me how to edit that file in order to implement fix? I've been struggling with align not working for some time and got 0 response for solving it, hopefully you can help me replicate this fix.

Thanks in advance

[themak1985]

@Shwele a quick workaround - select the text you want to align, put it in a div, then align it - it should work.

[lcdservices]

I just ran into this as well. Is there a plan for implementing new releases of the Mosaico library? There are some other fixes/improvements upstream that would be great to have implemented.

[themak1985]

@lcdservices The only way to get this to work is to put the text in a div before choosing an alignment. It is stupid but that's what we have to do.

[lcdservices]

@themak1985 it's fixed upstream in the Mosaico library. The current Civi extension is running an older version of that library. Thus my question about whether there are plans to upgrade at some point.

[mlutfy]

Does anyone know of potential issues with updating Mosaico? I opened a PR on our fork.

[mlutfy]

I did the following test:

git clone https://github.com/civicrm/mosaico
cd mosaico
git remote add upstream https://github.com/voidlabs/mosaico
git fetch upstream
git merge upstream/master 
npm i
grunt

then copied over the dist folder into the mosaico civicrm extension.

Center align was fixed. Most things seem to work, except:

• font-awesome icons are broken
• weird header alignnent
• red mosaico header

[mlutfy]

• font-awesome: fixed by copying the dist/fontawesome directory
• logo: fixed by patching the source (c.f. below)
• padding at the top: caused by Roundearth Seven

Not fixed:

• red mosaico header

I have no idea what I'm doing, so any tips welcome.

To fix the logo:

diff --git a/src/js/viewmodel.js b/src/js/viewmodel.js
index b7f7292..5324712 100644
--- a/src/js/viewmodel.js
+++ b/src/js/viewmodel.js
@@ -47,7 +47,7 @@ function initializeEditor(content, blockDefs, thumbPathConverter, galleryUrl) {
     debug: ko.observable(false),
     contentListeners: ko.observable(0),
     
-    logoPath: 'rs/img/mosaico32.png',
+    logoPath: '//mosaico.io/dist/img/mosaico32.png',
     logoUrl: '.',
     logoAlt: 'mosaico'
   };

[mattwire]

@mlutfy Upgrading should be pretty straightforward. I did it a couple of years ago but then abandoned it.

Basically you need to merge upstream into master and then look through this list voidlabs/mosaico@master...civicrm:v0.15-civicrm-2 and work out which need to be re-applied / refactored.

Given that mosaico doesn't seem well maintained at the moment it would also be a good idea to go down the list of pull requests at voidlabs and merge some in (eg. translation ones).

I keep thinking about trying to do a MIH to get this all updated but have not had the time as yet.

[lcdservices]

We're actually working upgrading for NYSS, so may have some PRs for review shortly. Would love to have others jump in and help with testing.

[mlutfy]

Sounds good! I would be happy to test.

From Matt's instructions, I see that we need to PR against the v0.15-civicrm-2 branch, so my tests would have broken tokens, test mails, and a few other things :)

[MegaphoneJon]

Attached find a diff that applies the centered text fix mentioned above to Civi Mosaico 2.6.
centeredtext.mosaico26.diff.txt

[homotechsual]

@lcdservices are you able to share your progress on this? Happy to help test or continue any in-progress work.

[allinappliadmin]

What works for me to center or justify text is in html code to replace style="text-align: justify;" by align="justify"
weird but works, really looking forward using MJML instead of Mosaico ;-)

[MegaphoneJon]

@mattwire You closed this but this bug is still present in Mosaico 2.8.

Looking at bin/setup.sh, DEFAULT_MOSAICO_BRANCH is v0.15-civicrm-2. Is this correct? I see 0.16 and 0.17 branches, both of which have the fix applied, so perhaps we're shipping with the wrong package?

[mattwire]

We need a Make It Happen or similar to upgrade the version of Mosaico we ship from 0.15 to 0.17 (latest)

[mlutfy]

There is a PR here: civicrm/mosaico#9

[MegaphoneJon]

Attached is a .zip file of Mosaico 2.8 with this alignment issue fixed. Please use emoji reactions to indicate if it works for you.
uk.co.vedaconsulting.mosaico-2.8-leftalignfix.zip

[MegaphoneJon]

Here is Mosaico 2.9 with this alignment issue fixed: uk.co.vedaconsulting.mosaico-2.9-leftalignfix.zip

[MegaphoneJon]

Mosaico 2.10: uk.co.vedaconsulting.mosaico-2.10-leftalignfix.zip

[francescbassas]

Thanks @MegaphoneJon. Just yesterday was applying your patch on Mosaico 2.10. Does anyone know how far we are from being able to update to a more current version of Mosaico?