Scrollbar in the Styles drop-down list disappears after initial display

[hel]

The vertical scroll bar within the Styles drop-down disappears on Chrome. Changing the selection in the editor so that the list of Styles is refreshed seems to cause the vertical scrollbar to appear in the list when it is next displayed.

Steps to reproduce

1. Go to ​http://ckeditor.com/demo (version 4.5.9 at time or writing)
2. Click on the Styles drop-down in the Toolbar so the list of styles is displayed
3. Click away so the list of styles is hidden
4. Click on the Styles drop-down a second time - notice that when the list of styles is re-displayed the vertical scrollbar is now missing.

Other details (browser, OS, CKEditor version, installed plugins)

Browser: Version 52.0.2743.49 beta-m (also seen on non beta Chrome) OS: Windows 7 CKEditor version: 4.4.6 (locally) and 4.5.9 (​http://ckeditor.com/demo)

[Jakub Ś]

I can't confirm that. I have tried clicking inside and outside of the editor. In both cases scrollbar was there. Have you got any third-party plugins installed on Chrome? Could you disable them and re-check.

I have tried Win7, CKE 4.5.9 and Chrome 52.

[Joe]

Can confirm problem. Problem does not exist in IE11, Edge or Firefox. Chrome only. I do not have Safari to test if this is a webkit issue or a Chrome-specific issue.

Windows 10, CKE 4.5.10, Chrome 52.0.2743.116 m, (also on Chrome 51... updated to 52 today) all extensions disabled

Confirmed on two different machines. Problem exists in my own installation, and as the OP mentioned, at ​http://ckeditor.com/demo

Initial display:

After clicking away, then displaying again:

[Jakub Ś]

Problem can be reproduced from CKEditor 3.0 in Chrome only.

I have been able to reproduce it in CKEditor 3.x and in CKEditor 4.x but in CKEditor 4.x only in standard package. Full package as well as ​http://ckeditor.com/demo#full both work as expected.

Chrome has changed something since this problem can be reproduced even in CKE 3.0.

[cactusek]

have the same issue, chrome only

[Kapil]

Facing same issue in CKEditor 4.5.11 as well on Chrome only

[Kapil]

The issue temporarily gets fixed if we open another combo and then come again to open first combo.

[Joe]

I found the problem, at least in my case. I'm using the Office2013 skin and the StrInsert plugin to create my own dropdown for variable insertion. After studying how the addRichCombo function worked, and after playing around with the plugin a bit (which is very simplistic), I determined the plugin was not the issue. The only difference between the demo page and mine, other than the plugin was the skin. I painstakingly compared the skins, particularly any class starting with .cke_panel, and after some time, found that .cke_panel_block class exists in Office2013, but not in the default Moono skin. Deleting that block in the Office2013 editor.css makes the problem go away. I haven't tested completely yet to see if there's any adverse effects from deleting that block, but initial results aren't showing any.

More specifically, in the .cke_panel_block class, these two styles seem to be affecting this:

display:table; width:100%;

Commenting them out, but leaving the rest seems to work.

TWO NOTES:

1. The problem exists in the standard package, as already mentioned, but the full version seems to work. Something else is affecting this in the standard package.

2. The problem does not exist in the Office2013 skin in the full package for the style, font and size dropdowns. I'm still baffled about why that is since they also use the RichCombo control.

[Jakub Ś]

This issue has been reported on our support channel.

[Tade0]

After some digging I found a Chromium issue that may be reporting the same problem: ​https://bugs.chromium.org/p/chromium/issues/detail?id=641881

Also when I opened the Chrome dev tools, disabled and then enabled the panel's iframe width style the scrollbar reappeared, so I suspect this is a rendering issue.

EDIT: simplified issue URL.

[Marek Lewandowski]

Moving to 4.6.2 minor release, as 4.6.1 is mostly about polishing 4.6.0.

[Marek Lewandowski]

So this is an upstream issue ​https://bugs.chromium.org/p/chromium/issues/detail?id=641881, waiting for the browser vendor to fix it. Please bump/star it so that it gets more attention.

[Mathijs den Burger]

A workaround for this issue is to add the following CSS rule to the contents.css file:

.cke_panel_container {
  overflow-x: auto;
}

[Marek Lewandowski]

@Tade0 could you confirm if it's that simple as in comment above?

[Tade0]

The mentioned fix didn't solve the problem. Checked in Chrome 55.0.2883.87.

[Mathijs den Burger]

I re-checked, and my 'fix' indeed does not work. Bummer.

[Marek Lewandowski]

@mdenburger thanks for giving it a try, so by the looks of it we need to wait for Chrome team to react.

[gmc]

Someone already has the ckeditor solution on crome over of dropdown ???

[gmc]

I have google chrome 57.0.2987.133 and don't resolve the problem. don't have solution and no working. someone have the solution to problem???

[gmc]

This only happens in the iframe and there are several forums on this case of the new updates of chrome but until now nobody could solve it

[Marek Lewandowski]

@gmc93 as mentioned above, you can track upstream status at ​https://bugs.chromium.org/p/chromium/issues/detail?id=641881 - feel free to star the issue.

[gmc]

And found a possible solution which is that when you close the dropdown will be put in the styles manually with a function the "display: none" when the dropdown is hidden and so the scroll will appear again. I have the code compiled so I can not solve it I get too tangled Can anyone help saying how to do it?

[Jakub Ś]

If you want to work with source version, please get it from here: ​http://docs.ckeditor.com/#!/guide/dev_source.

After making changes you can build editor: ​http://docs.ckeditor.com/#!/guide/dev_build

If you would like to submit a pull request, please also get familiar with:http://docs.ckeditor.com/#!/guide/dev_contributing_code

[gmc]

thanks i have the solution many thanks

[anish.k.virani]

@gmc93, can you please post your solution? I could not understand your comment. Sorry if I sound silly.

[gmc]

ckeditor

[gmc]

My problem is solved when I put "display: none" when closing the dropdown I have written in the file compiled the solution is in line 681 and 694 adding link

​https://dev.ckeditor.com/attachment/ticket/14716/ckeditor.js

[anish.k.virani]

@gmc93, thanks for the quick response. I have cke version 4.6.0 and it already seems to have display none of the element in the code in line 694. And I am still facing the same issue. Could you please help me out?

[gmc]

What I did was call the function that puts the "display: none" when it is closed I do not know if I explain is that I do not speak English

[gmc]

This is the version of ckeditor 4.6.0 that you told me already modify the script just copialo and replace it in your files is the standard version

[Jakub Ś]

#17014 was marked as duplicate

[Zach]

I'm still having this problem as well. I've tried a ton of solutions with CSS and can't seem to get any of them to work. Any update on this?

[Jakub Ś]

#17065 was marked as duplicate.

[Marek Lewandowski]

Upstream fix landed in Chrome 65, see ​https://github.com/ckeditor/ckeditor-dev/issues/1390#issuecomment-356104537 for more details.