React-draft-wysiwyg: Text alignment for multiline

[masquel]

If text is one line, center and right text alignment works great.
But if text is more then one line, text alignment is always left.

It happends because of .public-DraftStyleDefault-ltr which is inside of .rdw-center-aligned-block or .rdw-right-aligned-block and has text-align:left.

Result text is aligned well, but this styles doesn't appear in editor.

[jpuri]

@masquel : I will check this soon.

[dadepl]

Hi, any news on that?

I have added some styles in my custom css for wysiwyg for now and it seems to work:
.rdw-center-aligned-block > .public-DraftStyleDefault-block { text-align: center; }
.rdw-right-aligned-block > .public-DraftStyleDefault-block { text-align: right; }

[aureobeck]

@dadepl it's necessary to set width: 100% in the public-DraftStyleDefault-blockclass as well

[justinlazaro-ubidy]

Having an issue here, hope it will fix.

also got an temporary fix. Hope will address in the future

.rdw-center-aligned-block > .public-DraftStyleDefault-block > span { 
  text-align: center;
  width: 100%; 
  display: block;
}

.rdw-right-aligned-block > .public-DraftStyleDefault-block > span {
  text-align: right;
  width: 100%;
  display: block;
}

[jpuri]

Release 1.12.9 has the fix.

[codeaid]

Still having this issue with 1.12.9. Creating an empty editor, typing several lines of text into it and none of the alignment buttons do anything.

I see that there's a .rdw-justify-aligned-block div wrapping around the paragraph containing another one with .public-DraftStyleDefault-ltr defining text-align: left;. If I remove the attribute everything works as expected.

If I save and reload the text after e.g. right aligning it then it reverts to left aligned.

[jpuri]

@codeaid: Can you plz check that you are using new css file also.

[codeaid]

@jpuri - I'm pretty sure it was. I saw the display: block-inline in the styles when I inspected some elements. I'm afraid I've switched to using react-quill since I posted the message.

[vyachekg]

Still reproduced. 1.12.11

[Louie-Healthsite]

@jpuri - Still exists in 1.12.13
Resorted to CSS workaround from @justinlazaro-ubidy
Something that you're working on?

[Spyron1234]

@jpuri Facing issue for multiline long paragraph. It is not getting center aligned. Any necessary cautions for CSS or any other workaround? Please help.