Opened 12 years ago

Closed 12 years ago

Last modified 11 years ago

#8443 closed Bug (invalid)

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 (2)

screenshot.docx (1000.0 KB) - added by mdaly 12 years ago.
ckInJQueryDialog.html (3.9 KB) - added by Jakub Ś 12 years ago.

Download all attachments as: .zip

Change History (14)

comment:1 Changed 12 years ago by Jakub Ś

Status: newpending

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 12 years ago by mdaly

Attachment: screenshot.docx added

comment:2 Changed 12 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 12 years ago by 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.

Changed 12 years ago by Jakub Ś

Attachment: ckInJQueryDialog.html added

comment:4 Changed 12 years ago by Jakub Ś

@mdaly have you got any updates regarding this issue?

comment:5 Changed 12 years ago by Jakub Ś

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

comment:6 Changed 12 years ago by Jakub Ś

@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 12 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 12 years ago by 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.

comment:9 Changed 12 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 12 years ago by Jakub Ś

Resolution: invalid
Status: pendingclosed

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

comment:11 Changed 12 years ago by Jakub Ś

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

comment:12 in reply to:  1 Changed 11 years ago by 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.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 11 years ago by punit (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