Styles List not displaying when used in Ajax Modal Popup

[mdaly]

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

[Jakub Ś]

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.

[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

[Jakub Ś]

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.

[Jakub Ś]

@mdaly have you got any updates regarding this issue?

[Jakub Ś]

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

[Jakub Ś]

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

[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;

};

[Jakub Ś]

@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.

[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.

[Jakub Ś]

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

[Jakub Ś]

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

[punit]

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.

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@…