Opened 11 years ago

Closed 11 years ago

Last modified 10 years ago

#10081 closed Bug (fixed)

NEW! can't edit fields in jQuery UI modal dialog

Reported by: psyafter Owned by:
Priority: Normal Milestone:
Component: UI : Dialogs Version:
Keywords: CantFix Cc:


when using CKEditor in UI Dialog there is a problem with editors popups.


1) click on button

2) in ckeditor double click on text "click me"

3) in editor dialog there is a problem edit textboxes

past bugs reports that now any solution not work:

Attachments (3)

bug.docx (48.9 KB) - added by pmckensey 11 years ago.
html5.html (1.9 KB) - added by Jakub Ś 11 years ago.
index2.html (3.0 KB) - added by Jakub Ś 10 years ago.

Download all attachments as: .zip

Change History (13)

Changed 11 years ago by pmckensey

Attachment: bug.docx added

comment:1 Changed 11 years ago by pmckensey

jsfiddle: ​

  1. Open ckeditor in a jqueryui dialog
  2. click the font size drop down then click the font drop down without clicking in the editor area.

It seems that if you click the editor area before selecting one of the other drop downs the error does not happen.

comment:2 Changed 11 years ago by pmckensey

Cc: pmckensey@… added

comment:3 Changed 11 years ago by pmckensey

Cc: pmckensey@… removed

There is also a error happening on the text and background color selectors while in the jqueryui dialog.

Click the text color then click the background color without clicking in the editor area.

This the error that is generated:

Uncaught TypeError: Cannot call method 'setStyle' of null ckeditor.js:564 c.ui.add.onOpen ckeditor.js:564 d.onShow ckeditor.js:542 ckeditor.js:560 e ckeditor.js:541 c.execute ckeditor.js:536 (anonymous function) ckeditor.js:537 (anonymous function) ckeditor.js:26 ckeditor.js:27 onclick

comment:4 Changed 11 years ago by Jakub Ś

#10016 was marked as duplicate.

comment:5 Changed 11 years ago by Jakub Ś

Keywords: CantFix added
Status: newconfirmed
Version: 4.0.1
  1. CKEditor in plain modal dialog works.
  1. There are bugs in jQuery and jQuery admitted that problem is on their side - and Please see that second ticket was fixed two days ago thus problem might be gone after upgrading to UI version 1.10.2.
  1. For those that can't wait there is a simple workaround. Please use jQuery 1.6.4 and jQuery UI 1.8.16 and in configuration specify - config.baseFloatZIndex = 102000;. There might be newer versions working with this trick but you will have to check it on your own.
  1. @psyafter please see attached file. This is in fact your script but modified to use trick described in point 3. As you can see it works.

Changed 11 years ago by Jakub Ś

Attachment: html5.html added

comment:6 Changed 11 years ago by Jakub Ś

I'm confirming this bug and marking it as can't fix. It would be nice however if any of you guys could leave a comment if jQuery UI will fix 10.0.2 this issue.

comment:7 Changed 11 years ago by Jakub Ś

Resolution: fixed
Status: confirmedclosed

This issue is now fixed by jQuery. To get it working correctly you need to use code mentioned in before creating dialog. Sample page index.html shows how to do it.

comment:8 Changed 10 years ago by Kevin Kamel


Actually, no. Not at all. Had you taken a few minutes to test the proposed fix within your linked solution you would have seen that the jQuery proposed solution cannot work for us. It's pretty obvious if you just read the code as to why.

I have posted a general solution into, but it is not clear what is going to be the best solution overall for the community. By prematurely closing this ticket a lot of confusion has been created that can be seen in the forums, stackoverflow, as well as other areas. The problem is unresolved, although I am close to having something workable now.

comment:10 in reply to:  9 Changed 10 years ago by Kevin Kamel

To be clear it's completely impossible for that fix to have ever solved any of the related problems here, which is a conclusion you can very quickly reach if you play with the original fiddle containing the proposed solution.

The original problem was a z-index related issue whereby various windows from jqueryUI and CKEditor would conflict with eachother. The logic attached to 9087 doesn't "fix" the problem per se, but it does provide a workaround that is good enough for now. Hopefully in the future we're going to see a proper fix.

I found literally dozens of threads on jquery, jqueryUI and CKEditor forums pointing at this post and indicating that the solution doesn't work, so it's important for people to know that the final solution in ​ does appear to be a successful workaround. Currently it is deployed with a few thousand people using it, and no issues found. If issues are found the fix will be posted to ​

Last edited 10 years ago by Jakub Ś (previous) (diff)

Changed 10 years ago by Jakub Ś

Attachment: index2.html added

comment:11 Changed 10 years ago by Jakub Ś

@kamelkev yes you are right the proposed workaround doesn't work. Yours on the other hand (thanks to hooks provided by jQuery) seems to solve this problem.
I'm not sure right now whether something got cached or perhaps I was checking some older version of jQuery anyway I would appreciate if your comments weren't so rude. Everyone can make mistake you know. Offending people doesn't make you bigger.

Back to the issue - I have attached index2.html page (with @kamelkev fix) that does seem to solve this particular problem and allows editing dialog fields even in jQuery UI 10.0.0+

Last edited 10 years ago by Jakub Ś (previous) (diff)
Note: See TracTickets for help on using tickets.
© 2003 – 2022, CKSource sp. z o.o. sp.k. All rights reserved. | Terms of use | Privacy policy