Opened 17 months ago

Last modified 5 months ago

#14716 confirmed Bug

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

Reported by: hel Owned by: Tade0
Priority: Normal Milestone:
Component: General Version: 4.0
Keywords: Chrome Support VendorFix Cc:

Description

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)

Attachments (4)

ck.jpg (14.1 KB) - added by gmc 8 months ago.
cke.jpg (26.9 KB) - added by gmc 8 months ago.
ckeditor.js (542.6 KB) - added by gmc 7 months ago.
ckeditor
ckeditor.2.js (514.2 KB) - added by gmc 7 months ago.
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

Download all attachments as: .zip

Change History (40)

comment:1 Changed 16 months ago by Jakub Ś

Status: newpending
Version: 4.5.9

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.

comment:2 Changed 16 months ago by 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:

https://s9.postimg.org/vddxr096j/sb1.jpg

After clicking away, then displaying again:

https://s9.postimg.org/9fhgx7u63/sb2.jpg

comment:3 Changed 15 months ago by Jakub Ś

Keywords: Chrome added
Status: pendingconfirmed
Version: 4.0

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.

comment:4 Changed 15 months ago by cactusek

have the same issue, chrome only

comment:5 Changed 14 months ago by Kapil

Facing same issue in CKEditor 4.5.11 as well on Chrome only

comment:6 Changed 14 months ago by Kapil

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

comment:7 Changed 14 months ago by 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.
  1. 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.

comment:8 Changed 13 months ago by Jakub Ś

Keywords: Support added

This issue has been reported on our support channel.

comment:9 Changed 13 months ago by Marek Lewandowski

Milestone: CKEditor 4.6.1

comment:10 Changed 13 months ago by Tade0

Owner: set to Tade0
Status: confirmedassigned

comment:11 Changed 13 months ago by 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.

Last edited 13 months ago by Tade0 (previous) (diff)

comment:12 Changed 12 months ago by Marek Lewandowski

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

comment:13 Changed 12 months ago by Marek Lewandowski

Milestone: CKEditor 4.6.1CKEditor 4.6.2

comment:14 Changed 12 months ago by Marek Lewandowski

Keywords: VendorFix added
Milestone: CKEditor 4.6.2

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.

comment:15 Changed 12 months ago by Marek Lewandowski

Owner: Tade0 deleted
Status: assignedconfirmed

comment:16 Changed 9 months ago by 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;
}

comment:17 Changed 9 months ago by Marek Lewandowski

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

comment:18 Changed 9 months ago by Tade0

Owner: set to Tade0
Status: confirmedreview

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

comment:19 Changed 9 months ago by Mathijs den Burger

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

comment:20 Changed 9 months ago by Marek Lewandowski

Status: reviewpending

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

comment:21 Changed 9 months ago by Marek Lewandowski

Status: pendingconfirmed

comment:22 Changed 8 months ago by gmc

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

Last edited 8 months ago by gmc (previous) (diff)

comment:23 Changed 8 months ago by 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???

comment:24 Changed 8 months ago by 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

comment:25 Changed 8 months ago by 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.

Changed 8 months ago by gmc

Attachment: ck.jpg added

Changed 8 months ago by gmc

Attachment: cke.jpg added

comment:26 Changed 8 months ago by 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?

https://dev.ckeditor.com/raw-attachment/ticket/14716/ck.jpg

https://dev.ckeditor.com/raw-attachment/ticket/14716/cke.jpg

comment:27 Changed 8 months ago by 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

Last edited 7 months ago by Jakub Ś (previous) (diff)

comment:28 Changed 8 months ago by gmc

thanks i have the solution many thanks

comment:29 Changed 7 months ago by anish.k.virani

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

Changed 7 months ago by gmc

Attachment: ckeditor.js added

ckeditor

comment:30 Changed 7 months ago by 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

Last edited 7 months ago by gmc (previous) (diff)

comment:31 Changed 7 months ago by 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?

comment:32 Changed 7 months ago by gmc

Last edited 7 months ago by gmc (previous) (diff)

comment:33 Changed 7 months ago by gmc

Last edited 7 months ago by gmc (previous) (diff)

Changed 7 months ago by gmc

Attachment: ckeditor.2.js added

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

comment:34 Changed 6 months ago by Jakub Ś

#17014 was marked as duplicate

comment:35 Changed 6 months ago by 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?

comment:36 Changed 5 months ago by Jakub Ś

#17065 was marked as duplicate.

Note: See TracTickets for help on using tickets.
© 2003 – 2017 CKSource – Frederico Knabben. All rights reserved. | Terms of use | Privacy policy