Missing Lightbox CSS?

hullc

I have an Editor instance running on a table, but when I use any form options (create/edit/delete), the form displays underneath the table, without any formatting. When I remove the display option from my Editor initialization, the window displays as expected (in front of the table), but the formatting/layout seems to be a bit off, as if it were using the default JQueryUI CSS settings. After some research and inspection, I suspected that the issue was some missing CSS for the formatting of the Lightbox window. I did a find on my entire project attempting to find any lightbox-related CSS, but found nothing. The only mentions of lightbox were in .js files. Here is a list of the .css files I am including:

• "~/Content/site.css",
• "~/Scripts/jQueryUI/jquery-ui.structure.min.css",
• "~/Scripts/jQueryUI/jquery-ui.min.css",
• "~/Scripts/jQueryUI/jquery-ui.theme.min.css",
• "~/Scripts/DataTables-1.10.11/css/dataTables.jqueryui.css",
• "~/Scripts/DataTables/extensions/Buttons-1.1.2/css/buttons.jqueryui.min.css",
• "~/Scripts/DataTables/Editor-1.5.5/css/editor.jqueryui.css",
• "~/Scripts/DataTables/extensions/FixedHeader-3.1.1/css/fixedHeader.jqueryui.css",
• "~/Scripts/DataTables/extensions/Select-1.1.2/css/select.jqueryui.min.css"

I feel like I must be missing some obvious css file but after re-checking the download page there doesn't seem to be any other css provided.

One additional point of interest is that when I searched the project repository for the pre-upgrade version of Editor, I found a css file named dataTables.editor.css which does contain lightbox-related classes. This file doesn't come with the new version of Editor, though.

Where is the lightbox CSS information located with the latest version of DataTables and Editor?

allan

You don't list the Javascript, but it sounds like you might be missing editor.jqueryui.js. Is that correct?

The downloader is the best way of making sure you get everything you need.

Regards,
Allan

hullc

Here's a list of my Javascript includes, I do have editor.jqueryui.js included:

• "~/Scripts/common.js"
• "~/Scripts/jquery-2.2.3.min.js"
• "~/Scripts/jQueryUI/jquery-ui.min.js"
• "~/Scripts/DataTables/extensions/JSZip-2.5.0/jszip.js"
• "~/Scripts/DataTables/media/js/jquery.dataTables.min.js"
• "~/Scripts/DataTables/media/js/dataTables.jqueryui.min.js"
• "~/Scripts/DataTables/extensions/Buttons-1.1.2/js/dataTables.buttons.js"
• "~/Scripts/DataTables/extensions/Buttons-1.1.2/js/buttons.jqueryui.js"
• "~/Scripts/DataTables/extensions/Buttons-1.1.2/js/buttons.html5.js"
• "~/Scripts/DataTables/extensions/Buttons-1.1.2/js/buttons.print.js"
• "~/Scripts/DataTables/Editor-1.5.5/js/dataTables.editor.min.js"
• "~/Scripts/DataTables/Editor-1.5.5/js/editor.jqueryui.min.js"
• "~/Scripts/DataTables/extensions/FixedHeader-3.1.1/js/dataTables.fixedHeader.min.js"
• "~/Scripts/DataTables/extensions/Select-1.1.2/js/dataTables.select.min.js"
• "~/Scripts/moment.js"

allan

That looks correct to me. Does your jQuery UI custom install include their modal library?

I think I'd need a link to the page to be able to debug what is going wrong please.

Allan

hullc

The page is only running on intranet and on my local machine so I don't think I have a way to show you the exact page, what might help though is if you could tell me exactly where the DTED lightbox classes are supposed to be in the CSS. What I've noticed happening is that without the display option at all, the default jQueryUI form displays correctly, but with that option set to lightbox, the page tries to load the DTED lightbox css classes for its formatting, but they do not exist (or can't be found mabye?). If it provides any more detail this occurred when updating my DataTables library from 1.10.5->1.10.11 and my editor library from 1.3 to 1.5.5 (now 1.5.6).

hullc

Another interesting thing to note is that I see the div.DTED_Lightbox_... classes in the lightbox.scss file included in the Editor 1.5.6 download. These are the classes that I believe that I am missing. They don't seem to exist anywhere else in the CSS, but shouldn't they? I'm pretty new to web development so forgive me if I have some fundamental misunderstanding of CSS.

allan

Thanks for the additional information. The jQuery UI integration sets the default for the display option to be jqueryui, which is a display controller that the jQuery UI integration includes.

The jQuery UI integration CSS does not include any styling for the lightbox display type. The reason fro that was, to be honest, I couldn't see any point for it. If you are using jQuery UI styling, I figured you would want to use the jQuery UI modal rather than Editor's built in lightbox since they basically do the same thing and one is correctly styled for jQuery UI sties and the other wouldn't fit in at all. The same applies to Bootstrap and Foundation.

My apologies for not making this clear in the documentation, which I will fix. Is there a reason why you want to use the lightbox display rather than the jQuery UI modal?

Allan

hullc

Okay, that makes sense. I ended up just using the jQueryUI modal anyway; at the time I was experiencing the error you fixed in 1.5.6 where form-level errors weren't displaying, and I thought that it was because I didn't have a display selected. Once I upgraded to 1.5.6, I realized that wasn't the problem.

There is no particular reason that we want to use lightbox; I inherited this code and that was simply how it was set up already, so I wanted to maintain consistency.

Honestly, I didn't know that jqueryui was an option for display; I took "there are two display controllers built into editor" to mean that there were ONLY those two options for display. Thanks for filling me in! :)

allan

Super - thanks for the feedback. I've added a note to the display documentation about plug-ins locally and will deploy it to the site later. You can create your own display plug-ins as well if you wanted :-)

Allan