Ticket #8443 (closed Bug: invalid)

Opened 3 years ago

Last modified 21 months ago

Styles List not displaying when used in Ajax Modal Popup

Reported by: mdaly Owned by:
Priority: Normal Milestone:
Component: General Version:
Keywords: Cc:

Description

When I use the ckeditor inside an ajax modal popup control, the 'Styles' List does not display. My initial thought is a z-index problem and the list is opening behind the modal popup window - however I could be wrong.

If it is a z-index problem, can anyone advise me where I should update the CSS to fix this problem

thanks in advance

Attachments

screenshot.docx (1000.0 KB) - added by mdaly 3 years ago.
ckInJQueryDialog.html (3.9 KB) - added by j.swiderski 3 years ago.

Change History

comment:1 follow-up: ↓ 12 Changed 3 years ago by j.swiderski

  • Status changed from new to pending

Could I ask you to provide reduced test case showing the problem?

It will be easier for us to find a solution if we know what to look at. Thank you.

Changed 3 years ago by mdaly

comment:2 Changed 3 years ago by mdaly

Hi, I have attached a screenshot to help illustrate my issue.

i am using the ckeditor within an Ajax Modal Popup. when i try to expand the 'Styles' List nothing appears to be happening.

However, when i drag the modal away from the center of screen, i can see the list has succesfully opened - but behind the Ajax Modal Popup.

I have tried to solve this issue but with no success.

can you provide any advice or help regarding what file i might need to update to make the list open on top of the ckeditor? i am thinking it is a CSS issue and would be solved by increasing the Z-Index value of the list.

However, i dont know where to locate the relevant file to do this.

thanks again

comment:3 Changed 3 years ago by j.swiderski

I'm not sure if you are using JQuery for this dialog but this is the case than you might be interesting in: http://bugs.jqueryui.com/ticket/4727[[BR]] http://forum.jquery.com/topic/can-t-edit-fields-of-ckeditor-in-jquery-ui-modal-dialog[[BR]]

Some users claim that setting the following has worked for them:

.cke_skin_kama .cke_dialog_body { z-index: 10200 !important; } 

I have checked this problem with latest CKEditor, JQuery and JQuery UI and it didn't occur so I'm not sure if the above applies to your issue (I assume you are using latest software). If it applies and you manage to fix this, would you be so nice and share with us what solution has worked for you?

It would be also nice if you could provide more information like what is used for that modal dialog. The best solution would be attaching the source code showing the problem just like the one I have attached to show that there is no problem.

Changed 3 years ago by j.swiderski

comment:4 Changed 3 years ago by j.swiderski

@mdaly have you got any updates regarding this issue?

comment:5 Changed 3 years ago by j.swiderski

@mdaly have you got any updates regarding this issue? Did the z-index: solution worked for you?

comment:6 follow-up: ↓ 7 Changed 3 years ago by j.swiderski

@mdaly coudl you give us your feedback if the provided links to jQuery forum have solved your problem or the issue still occurs?

comment:7 in reply to: ↑ 6 Changed 3 years ago by Grewal

Replying to j.swiderski:

@mdaly coudl you give us your feedback if the provided links to jQuery forum have solved your problem or the issue still occurs?

I had the similar issue. This is just a z-index issue in my opinion. I just increased the base z index in the config file and this was resolved.

Change Made in the ckeditor/config.js file as

CKEDITOR.editorConfig = function (config) {

just increse the z index value

config.baseFloatZIndex = 102000;

};

comment:8 Changed 3 years ago by j.swiderski

@Grewal thank you for your feedback. It's nice to see that at least some users take effort to confirm that proposed solution really worked for them.

comment:9 Changed 3 years ago by mdaly

Hi All,

apologies for the late reply.

Just to confirm, the issue was with the z-index css element as suggested above.

The problem is now resolved.

thank you for all the help, and apologies again for my late response.

comment:10 Changed 3 years ago by j.swiderski

  • Status changed from pending to closed
  • Resolution set to invalid

@mdaly thank you for the confirmation. Better late than never.

comment:11 Changed 3 years ago by j.swiderski

If this solution has not workled for someone than one might try another solution presented in #5779.

comment:12 in reply to: ↑ 1 Changed 21 months ago by punit20270

I come up with exact solution.

Issue :

1) Open JQuery modal popup.

2) FCKEditor configured on JQuery modal popup.

3) Click on Insert special character (button - available on FCKEditor).

4) Opens special character list behind modal popup.

Solution :

This is basically z-index issue.Below are the steps to solve the problem.

1) Go to fckeditor/fckconfig.js

2) Find FCKConfig.FloatingPanelsZIndex

3) SET FCKConfig.FloatingPanelsZIndex = 100005;

I have solved my issue like this....

Regards,

Punit Pandya

Sr. software engineer

punit270@…

Last edited 21 months ago by punit20270 (previous) (diff)
Note: See TracTickets for help on using tickets.
© 2003 – 2012 CKSource – Frederico Knabben. All rights reserved. | Terms of use | Privacy policy