We have a JQuery UI Accordion with an igGrid on it. When we bring up the column chooser the modal dialog is behind the accordion. I see you are setting z-index and have tried changing the values but it doesn't seem to be changing the positioning. Is this a known bug? Do you have a fix that we can apply with some css?
Hello Tammy Wohlrabe,
Thank you for posting into our community. Our dialogs are appended to the grid container and by default their containment is also the grid container. Take a look at the sample. I've changed the containment and I appended the dialog to the body for the groupby dialog only. It can be done using the same approach for all dialogs. This should allow you to drag and resize it without hiding the content behind the accordion header.
name: "GroupBy", groupByDialogContainment: $('body'), modalDialogOpened: function (evt, ui) { ui.modalDialogElement.appendTo("body"); }
Please keep in mind, that when you append the dialogs to the body, accordion won't hide them after you collapse the content, but you can handle it using our API for closing the dialog (http://www.igniteui.com/help/api/2015.1/ui.iggridgroupby#methods:closeGroupByDialog)
The grid doesn't appear to load in your fiddle that you posted.
Also it seems like we have to do this individually for each dialog the grid pops up. Is there an easier way to do it so it applies to any dialog tied to the grid feature chooser?
Sure, you can select all the dialogs in the grid container and append them to the body, window or the accordion container. But you still need to specify the containment for each dialog. I modified the sample a bit to demonstrate it for all of the dialogs.
Does the grid load for that sample and is this helpful ?
This helps. Thanks!
I'm glad to hear that. Please let us know if you need any further assistance or you have other questions regarding this matter.