Add Scroll in dropdown list of a toolbar option ?

[gauravjain028]

🆕 Feature request

Is it possible to show scroll bar in the dropdown in toolbar?
For example, I am using Font plugin, which has font family and size. If I have many options then it shows long dropdown. I guess it is not only related with font plugin, it is related with Dropdown view.

Is there any workaround for it?

Is this a bug report or feature request? (choose one)

🐞 Bug report or documentation improvement

💻 Version of CKEditor

12.0.0

📋 Steps to reproduce

1. Follow the steps from the Inline Widget docs (https://ckeditor.com/docs/ckeditor5/latest/framework/guides/tutorials/implementing-an-inline-widget.html) or (https://ckeditor5.github.io/misc/placeholder-demo/index.html)
2. Try to style all the text

✅ Expected result

From my perspective, it would be desired of the inline widget to be treated as part of the text when it comes to styling(bold, italic, font...).

❎ Actual result

The text around the inline widget get styled but the widget itself does not.

📃 Other details that might be useful

I was able to get around this issue with changing the createContainerElement with createAttributeElement, adding a random id and priority 20.
And then adding the text using the private _insertChild converting elementToElement. But this does not seam right.

---

If you'd like to see this feature implemented, add 👍 to this post.

[Reinmar]

cc @oleq @dkonopka

Can we have some reasonable max-height?

And what would be a workaround until we change this on our side?

[oleq]

.ck.ck-dropdown__panel {
	max-height: 160px; /* or anything else, more likely ~300px or so */
	overflow-y: auto;
}

This should become a part of our codebase.

[Reinmar]

Why so small height? There's plenty of space in the viewport (usually). I think that the point of limiting the height was that if the number of options is too big the height of the panel exceeds the height of the viewport. BTW, remember that panels with scroll work terribly so we wanted to avoid them. The issue is that you can't capture the scroll event in them (easily) so the entire page starts to scroll.

[dkonopka]

Like @Reinmar I would go with something really long (at least 400px), even Google is trying to avoid "double scroll" issue with soooo long dropdowns.

I was thinking about using Viewport units, I mean - vh property, but first we need research in case of some unexpected bugs. AFAIR we didn't think about vh/vw/vmax properties before in the UI elements.

.ck.ck-dropdown__panel {
	max-height: 90vh;
	overflow-y: auto;
}

[long-lazuli]

That is something that could be handled by a CSS custom-property for me.

.ck.ck-dropdown__panel {
	max-height: 60vh;
	max-height: var(--ck-editor-dropdown-max-height, 60vh);
	overflow-y: auto;
}

and in the dropdown plugin, or in theme plugin, I don't know :

...
  init(){
    const editorHeight = editor.element.nextElementSibling.clientHeight
    editor.element.style.setProperty('--ck-editor-dropdown-max-height', `${editorHeight}px`)
    ...
  }
...

[dkonopka]

@long-lazuli CSS Variables is a really good idea to handle that and let users eaisly customize the height of dropdown.

Anyways your JS snippet might be buggy, because editor.element.nextElementSibling.clientHeight can be bigger than 100% of viewport height, so simple CSS Variable will be enough I think.

[oleq]

@dkonopka Can you propose some PR?

[long-lazuli]

@dkonopka , my code is a pseudo-code to give a direction. It's not intended be pasted somewhere.
It's just to discuss some possibilities.
For the record, Math.max() should do the trick.

But it could be better to use something like

• --ck-editor-viewport-height
• --ck-editor-viewport-width
• --ck-editor-toolbar-distance-from-viewport-top
• --ck-editor-toolbar-distance-from-viewport-right
• --ck-editor-toolbar-distance-from-viewport-bottom
• --ck-editor-toolbar-distance-from-viewport-left

then, you can calc() things...

( I don't know if viewport height and width should be calculated in the dropdown function. maybe somewhere more generic; as we should avoid adding scroll/resize listeners in every plugins... )

[oleq]

We went with the KISS approach (custom property + overflow). Let's see if it's enough first and then extend the solution when necessary (more use cases).

[dkonopka]

Because of https://github.com/ckeditor/ckeditor5-theme-lark/issues/191 we need to revert change with maximum height and overflow of .ck-dropdown.

At this moment there is no way to fix it, firstly we need to use BalloonPanelView for tooltips.

[Sora2455]

Hi. Two months later, do we have a resolution for this?

[rk-1996]

i have same issue in ckeditor scroll bar and i added below code in component css file and it's working great..!!

:host ::ng-deep .ck.ck-reset.ck-list {
max-height: 160px;
overflow-y: auto;
}

[oleq]

@rk-1996 What about #3416?

[rk-1996]

@oleq in this i'm not facing #3416,its not generating horizontal scroll bar.

[oleq]

WDYT @panr?

[panr]

@oleq I only came up with this quite hacky idea...

So this can be achieved but we need to test it, because we may break some things... I'm gonna prepare a POC soon.

[Reinmar]

It's curious whether display:flow-root could help here.

[oleq]

It's curious whether display:flow-root could help here.

I check this and it didn't help 😕 Because of overflow-y: auto; which is needed for the scrollbar to show up when the max-height is exceeded, the browser also enables the horizontal scrollbar (due to button tooltips being positioned) and it comes down to #3416. Again.

[shivakantshukla55]

I am having the same issue with BalloonEditor I tried the above solution
i.e
.ck.ck-dropdown__panel {
max-height: 160px; /* or anything else, more likely ~300px or so */
overflow-y: auto;
}
But now my whole balloon editor is scrolling.