Source editing view loses borders on scroll

[niegowski]

📝 Provide detailed reproduction steps (if any)

1. http://fake.ckeditor.com:8081/build/docs/ckeditor5/latest/features/source-editing.html
2. Open source editing mode
3. Scroll content (both horizontally and vertically)

✔️ Expected result

The border is still visible.

❌ Actual result

Borders scroll out of the visible area.

❓ Possible solution

If you have ideas, you can list them here. Otherwise, you can delete this section.

📃 Other details

• Browser: …
• OS: …
• First affected CKEditor version: …
• Installed CKEditor plugins: …

---

If you'd like to see this fixed sooner, add a 👍 reaction to this post.

[Reinmar]

The textarea is too wide:

We need to force it to have 100% of its parent width. Not more.

But, why do we use display: inline-grid there?

A thing to consider (that we should not break): the auto-resize of textarea's height.

This needs to be tested in all browsers.

[Reinmar]

The horizontal scroll solution: word-break: break-all + white-spaces: pre-wrap.

The vertical scroll has to be checked, because we must make the container of the textarea not scrollable. The tricky part is why is there max-width: 700px for the container. If it's a workaround for the toolbar not being sticky in source editing, we should not break it here. So, if in a reasonable 2h check this cannot be fixed, let's not change it.

Also: test this in a manual test (without documentation page style)!

[dawidurbanski]

Instead of adding word-break: break-all + white-space: pre-wrap to fix it, I went for removing the source of the problem, the grid thing.

I replaced it with some good old position stuff.

After making it work in manual test (in general case) I slightly modified source editing snippet css to work with the new update (so it works in conjunction with max-width: 700px on the container).

Fixed in #10566

[dawidurbanski]

@ckeditor/qa-team could you check this cross-browser? Steps are described in the PR additional information section: #10566 (comment)

[Mgsy]

@ckeditor/qa-team could you check this cross-browser? Steps are described in the PR additional information section: #10566 (comment)

Looks good in all browsers 👍

[theezeb]

@dawidurbanski I have integrated the CKE5(decoupled-editor), but here i'm not getting the scroll for some reason, could you look at this?

[dawidurbanski]

@shahzebgit by default Source Editing feature textarea has overflow: hidden applied. If for any reason you restrict editor (and therefore source textarea) height, you need to make sure this field gets correct overflow:

.your-container-class .ck-source-editing-area textarea {
    overflow: auto;
}