Text Toolbar is out of sight for long texts

[fortunatomaldonado]

Issue https://issues.liferay.com/browse/LPS-132723 Long content is not scrollable making it really hard to use the toolbar to format the text at the bottom -- the user will have to keep scrolling the page up and down to access the toolbar{quote}

Steps to reproduce

1. Start Liferay
2. Create a Basic Web Content
3. Enter long text until toolbar is no longer viewable.
4. Try to editing text at the bottom.

Expected result The Toolbar should be easily accessible to use when trying to edit text at the very bottom.

Actual result The long content makes it hard to use the toolbar options at the top of the field to format the text at the bottom.

Affected Browsers Chrome, Firefox, Edge

Not reproducible in IE11 since the body has a scrollbar making it easy to use the toolbar.

https://user-images.githubusercontent.com/31672551/119609209-150b0380-bdac-11eb-856d-cf9d5643579b.mp4

[fortunatomaldonado]

Hello @julien,

Do you, or another team member, have time to take a look at this? This is an urgent issue for a customer and would like to get the teams thoughts if this behavior should be changed or if a customization can benefit the customer.

I am currently having issue debugging liferay CKEditor but am trying to get it working as it does in IE11 for the customer.

Thank you in advance.

[julien]

Hi @fortunatomaldonado, thanks for reporting this issue.

Since you'd like to get feedback from the team, I'll mention @liferay-frontend to make this more visible. If you need more instant feedback (even though it might still be asynchronous), I recommend opening a thread in a public channel on Slack (#t-frontend-infra for example) next time.

Additionally, and since you asked for my opinion too, I think that this question might be better answered by the team responsible of the Web Content (journal) application, because this isn't really related to ckeditor itself, but the way it's being used or how the application is designed. Let me know if that helps.

[tdemnati-star]

Hi @fortunatomaldonado ,

Could you please explain how this is working for IE11 ? Not sure to understand the expected behaviour. Please contact the team on slack for follow up, as Julien opened a thread there.

[bbsuh]

Hi @tdemnati-star , can you please link the slack thread to this discussion?

[PhilC88]

Hi @tdemnati-star

To help clarify, essentially in IE11 the text formatting options for web content are always in view, regardless of the length of text. In Chrome this is not the case. For Chrome, if a user is editing a long text entry lower down they are required to:

1. highlight the text for editing
2. scroll back up the page to access the format option needed
3. scroll back down the page to see the text formatting applied

(note in Fortunato's movie file he is having to scroll up and down).

Hope this helps.

[fortunatomaldonado]

Hello @PhilC88, thank you for clarifying!

@tdemnati-star, I have updated the video above to show IE11's behavior of CKEditor and Chromes behavior. 7.3.x is used since Master and 7.4.x do not work with IE11.

[fortunatomaldonado]

@bbsuh link to discussion https://liferay.slack.com/archives/CL9RTSZ52/p1621932294054400

[fortunatomaldonado]

Closing since this is more about how CKEditor is being used rather than an issue with CKEditor.