Editor dialogs inserted as div rather than opening

bigbenchrob · October 2015

I had editing working fine (lightbox, bubble, details). Then I decided to upgrade to the latest versions of the Datatables and Editor files, using the cdn.

Here's the problem: now, if I highlight a row on the table and click "Edit", the contents of what would be the dialog instead appear at the bottom of the page. Inspecting with Firebug shows this:

after initial page load:

<body>

...

    <div class="container">
    <script type="text/javascript">
    <div class="selectize-dropdown single" style="display: none;">
</body>

after clicking the edit button:

<body>

...

    <div class="container">
    <script type="text/javascript">
    <div class="selectize-dropdown single" style="display: none; width: 100px; top: 0px; left: 0px;">
    <div class="DTED_Lightbox_Background" style="opacity: 1;">
    <div class="DTED DTED_Lightbox_Wrapper" style="opacity: 1; top: 0px;">
</body>

I can open a jQuery UI dialog normally. I am loading the following files via the Datatables cdn: datatables, select, buttons, and responsive, styled for Bootstrap. Serving the Editor files locally.

Any help appreciated!

allan · October 2015

You mention jQuery UI, are you using the jQuery UI integration for Editor? Have you upgraded all of the CSS and the integration files that Editor uses (they are included in the Editor download and will need to be updated in tandem with the latest version).

Allan

bigbenchrob · October 2015

I only loaded jQuery UI as an easy way to see if I could open a dialog outside of datatables. The problem preceded that.

Thanks, Rob

bigbenchrob · October 2015

<Have you upgraded all of the CSS and the integration files that Editor uses (they are included in the Editor download and will need to be updated in tandem with the latest version).

Bingo! Overlooked that in the course of my mass overhaul and now dialogs are opening correctly.

Many thanks for the quick response, Allan!

allan · October 2015

Hi,

No problem - good to hear you've got it working now!

Allan

bigbenchrob · October 2015

Oops--spoke too soon. I was having trouble with the editor dialog styling, so, thinking I had again omitted something I went back to the Download page and downloaded each of the desired css and js files individually (via the .zip package). Then included them in the order specified at the bottom of the Download page (see below). Way too slow this way, of course, but I didn't want to miss anything. Result: still getting the dialog contents inserted as a div at the bottom of the page rather than in a dialog.

I notice that only one editor css file is included in the download package, editor.bootstrap.min.css. I assume this is correct? (it seems to cover the selectors I checked out in editor.dataTables.min.css despite being significantly shorter).

Thanks,

Rob

    <link rel='stylesheet' type='text/css' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css' media='screen, projection'><!-- id: 2 -->
    <link rel='stylesheet' type='text/css' href='/jscripts-dt-bootstrap/bootstrap-datepicker/css/bootstrap-datetimepicker.min.css' media='screen, projection'><!-- id: 10 -->
    <link rel='stylesheet' type='text/css' href='/jscripts-dt-bootstrap/Selectize/css/selectize.min.css' media='screen, projection'><!-- id: 11 -->
    <link rel='stylesheet' type='text/css' href='/jscripts-dt-bootstrap/DataTables-1.10.9/css/dataTables.bootstrap.min.css' media='screen, projection'><!-- id: 12 -->
    <link rel='stylesheet' type='text/css' href='/jscripts-dt-bootstrap/Buttons-1.0.3/css/buttons.bootstrap.min.css' media='screen, projection'><!-- id: 13 -->
    <link rel='stylesheet' type='text/css' href='/jscripts-dt-bootstrap/Editor-1.5.1/css/editor.bootstrap.min.css' media='screen, projection'><!-- id: 14 -->
    <link rel='stylesheet' type='text/css' href='/jscripts-dt-bootstrap/FieldType-Selectize/editor.selectize.min.css' media='screen, projection'><!-- id: 15 -->
    <link rel='stylesheet' type='text/css' href='/jscripts-dt-bootstrap/Responsive-1.0.7/css/responsive.bootstrap.min.css' media='screen, projection'><!-- id: 16 -->
    <link rel='stylesheet' type='text/css' href='/jscripts-dt-bootstrap/Select-1.0.1/css/select.bootstrap.min.css' media='screen, projection'><!-- id: 17 -->
    <link rel='stylesheet' type='text/css' href='/css/bb-custom.css' media='screen, projection'><!-- id: 1 -->
<script src='/jscripts/jquery/jquery-1.11.3.min.js'></script><!-- id: 1 -->
<script src='/jscripts/jquery/jquery.cookie.js'></script><!-- id: 2 -->
<script src='/jscripts/knockout-3.3.0.js'></script><!-- id: 6 -->
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script><!-- id: 3 -->
<script src='/jscripts-dt-bootstrap/JSZip-2.5.0/jszip.min.js'></script><!-- id: 10 -->
<script src='/jscripts-dt-bootstrap/pdfmake-0.1.18/build/pdfmake.min.js'></script><!-- id: 11 -->
<script src='/jscripts-dt-bootstrap/pdfmake-0.1.18/build/vfs_fonts.js'></script><!-- id: 12 -->
<script src='/jscripts-dt-bootstrap/MomentJS/moment.min.js'></script><!-- id: 13 -->
<script src='/jscripts-dt-bootstrap/bootstrap-datepicker/js/bootstrap-datetimepicker.min.js'></script><!-- id: 14 -->
<script src='/jscripts-dt-bootstrap/Selectize/js/standalone/selectize.min.js'></script><!-- id: 15 -->
<script src='/jscripts-dt-bootstrap/DataTables-1.10.9/js/jquery.dataTables.min.js'></script><!-- id: 16 -->
<script src='/jscripts-dt-bootstrap/DataTables-1.10.9/js/dataTables.bootstrap.min.js'></script><!-- id: 17 -->
<script src='/jscripts-dt-bootstrap/Buttons-1.0.3/js/dataTables.buttons.min.js'></script><!-- id: 18 -->
<script src='/jscripts-dt-bootstrap/Buttons-1.0.3/js/buttons.bootstrap.min.js'></script><!-- id: 19 -->
<script src='/jscripts-dt-bootstrap/Buttons-1.0.3/js/buttons.flash.min.js'></script><!-- id: 20 -->
<script src='/jscripts-dt-bootstrap/Buttons-1.0.3/js/buttons.html5.min.js'></script><!-- id: 21 -->
<script src='/jscripts-dt-bootstrap/Buttons-1.0.3/js/buttons.print.min.js'></script><!-- id: 22 -->
<script src='/jscripts-dt-bootstrap/Editor-1.5.1/js/dataTables.editor.min.js'></script><!-- id: 23 -->
<script src='/jscripts-dt-bootstrap/Editor-1.5.1/js/editor.bootstrap.min.js'></script><!-- id: 24 -->
<script src='/jscripts-dt-bootstrap/FieldType-BootstrapDate/editor.datetimepicker-2.min.js'></script><!-- id: 25 -->
<script src='/jscripts-dt-bootstrap/FieldType-Selectize/editor.selectize.min.js'></script><!-- id: 26 -->
<script src='/jscripts-dt-bootstrap/Responsive-1.0.7/js/dataTables.responsive.min.js'></script><!-- id: 27 -->
<script src='/jscripts-dt-bootstrap/Select-1.0.1/js/dataTables.select.min.js'></script><!-- id: 28 -->

allan · October 2015

editor.bootstrap.min.css / editor.dataTables.min.css

You only include one CSS file (the one for the styling that you want). For the Javascript you always include the core file, plus if there is an integration files include that (there isn't for DataTables as the defaults are suitable for DataTables styling).

What is very odd is that if you are including the Bootstrap styling, then it should use the Bootstrap modal. And if you've included Bootstrap there should be no reason why the styling wouldn't be applied.

I'm afraid to offer any further assistance I would need a link to the page so I can debug what is happening. Are you able to send me one? You can PM it to me by clicking my name above and then "Send message" if you don't want to make it public.

ALlan

allan · October 2015

Hi Rob,

Thanks for the PM - I'll continue the discussion here so anyone searching for the same topic can find this if that is okay.

So the issue is caused by:

display: "lightbox",

The bootstrap integration for Editor actually creates its own display controller called bootstrap (imaginative...!). So what is happening at the moment is the built in lightbox display controller is being used, but there are no styles for it (since they are in the DataTables Editor styling file and you've got the Bootstrap Editor styling file).

The fix is one of two options:

Use `display: 'bootstrap', or
Just remove that option and let the default be used.

Regards,
Allan

bigbenchrob · October 2015

Thanks, Allan, that worked, producing a plainly styled Bootstrap-esque dialog.

Unfortunately, the selectize menus that happen to lie at the bottom of the dialog are now opening behind the dialog! (As a potentially relevant side note, I've had a continuing problem with the overflow from these menus being hidden beyond the bottom edge of the dialog, despite following the recommended course of setting the z-index of the dropdown to 12.)

(From the link I sent, go to Modules, edit a record in light box, and try to select from the Click cookie menu at the bottom of the dialog.)

allan · October 2015

Bootstrap gives its modal a z-index of 1050, so the Selectize list needs to be higher than that. Using my browser's inspector I can see that it is currently:

div.selectize-dropdown {
    z-index: 120;
}

Changing it to be:

div.selectize-dropdown {
    z-index: 1100;
}

should let it pop up in front.

Allan

bigbenchrob · October 2015

Yep. Thanks again for great and timely support.

Editor dialogs inserted as div rather than opening

Editor dialogs inserted as div rather than opening

Answers

Howdy, Stranger!

Categories

DataTables

Editor dialogs inserted as div rather than opening

Editor dialogs inserted as div rather than opening

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables