Opened 11 months ago

Last modified 13 days ago

#14716 confirmed Bug

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

Reported by: helsom 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 gmc93 7 weeks ago.
cke.jpg (26.9 KB) - added by gmc93 7 weeks ago.
ckeditor.js (542.6 KB) - added by gmc93 4 weeks ago.
ckeditor
ckeditor.2.js (514.2 KB) - added by gmc93 4 weeks 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 (39)

comment:1 Changed 10 months ago by j.swiderski

  • Status changed from new to pending
  • Version 4.5.9 deleted

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 10 months ago by jlcfly

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 9 months ago by j.swiderski

  • Keywords Chrome added
  • Status changed from pending to confirmed
  • Version set to 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 9 months ago by cactusek

have the same issue, chrome only

comment:5 Changed 8 months ago by kapil

Facing same issue in CKEditor 4.5.11 as well on Chrome only

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

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 7 months ago by j.swiderski

  • Keywords Support added

This issue has been reported on our support channel.

comment:9 Changed 7 months ago by m.lewandowski

  • Milestone set to CKEditor 4.6.1

comment:10 Changed 7 months ago by Tade0

  • Owner set to Tade0
  • Status changed from confirmed to assigned

comment:11 Changed 7 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 7 months ago by Tade0 (previous) (diff)

comment:12 Changed 6 months ago by m.lewandowski

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

comment:13 Changed 6 months ago by m.lewandowski

  • Milestone changed from CKEditor 4.6.1 to CKEditor 4.6.2

comment:14 Changed 6 months ago by m.lewandowski

  • Keywords VendorFix added
  • Milestone CKEditor 4.6.2 deleted

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 6 months ago by m.lewandowski

  • Owner Tade0 deleted
  • Status changed from assigned to confirmed

comment:16 Changed 3 months ago by mdenburger

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 3 months ago by m.lewandowski

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

comment:18 Changed 3 months ago by Tade0

  • Owner set to Tade0
  • Status changed from confirmed to review

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

comment:19 Changed 3 months ago by mdenburger

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

comment:20 Changed 3 months ago by m.lewandowski

  • Status changed from review to pending

@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 3 months ago by m.lewandowski

  • Status changed from pending to confirmed

comment:22 Changed 7 weeks ago by gmc93

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

Last edited 7 weeks ago by gmc93 (previous) (diff)

comment:23 Changed 7 weeks ago by gmc93

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 7 weeks ago by gmc93

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 7 weeks ago by m.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 7 weeks ago by gmc93

Changed 7 weeks ago by gmc93

comment:26 Changed 7 weeks ago by gmc93

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 7 weeks ago by j.swiderski

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 4 weeks ago by j.swiderski (previous) (diff)

comment:28 Changed 7 weeks ago by gmc93

thanks i have the solution many thanks

comment:29 Changed 4 weeks ago by anish.k.virani

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

Changed 4 weeks ago by gmc93

ckeditor

comment:30 Changed 4 weeks ago by gmc93

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 4 weeks ago by gmc93 (previous) (diff)

comment:31 Changed 4 weeks 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 4 weeks ago by gmc93

Last edited 4 weeks ago by gmc93 (previous) (diff)

comment:33 Changed 4 weeks ago by gmc93

Last edited 4 weeks ago by gmc93 (previous) (diff)

Changed 4 weeks ago by gmc93

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 2 weeks ago by j.swiderski

#17014 was marked as duplicate

comment:35 Changed 13 days ago by bluetidepro

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?

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