DataTables
Advanced interaction
features for your tables.
Editor
Comprehensive editing
library for DataTables.
Manual
Download
≡ Show site navigation

Nested editors - scrolling question on secondary editor

Nested editors - scrolling question on secondary editor

sdroulerssdroulers Posts: 43Questions: 14Answers: 0
edited December 2017 in DataTables

Hi everyone,

I'm using the 'Bootstrap' display controller for all my table.

For a specific table, I needed to have a nested editor (a pop up with details) and since using Bootstrap display for my secondary editor looks compromised (according to the posts I read
due to bootstrap limitation with multiple modals) I used the [jQueryUI display controller (https://editor.datatables.net/reference/display/jqueryui "jQueryUI display controller").

After some tuning (z-index etc...) my secondary window shows up with a limitation however on scolling. Infact my secondary editor is higher than the modal original editor and therefore the bottom part of it is 'under my screen' with no way to reach it with scrolling (blcked, probably due to my 'parent bootstrap modal' editor.

Do you have in mind any tricks which would enable scrolling in my secondary editor which is nested in a bootstrap modal?

Many thanks!

Sébastien

PS: any elegant / inelegant suggestion is welcomed ! If anyone has a solution to use full bootstrap solution in this case he could count on all my admiration !

This question has an accepted answers - jump to answer

Answers

  • sdroulerssdroulers Posts: 43Questions: 14Answers: 0
    edited December 2017

    Well, I just found my answer here:

    I just needed to add this css:

    .modal-open {
    overflow: scroll;
}

    However it affects all my other modal and background scrolling when modal is opened is active (not so great...). Any more brilliant suggestions are welcomed!

    Sébastien

  • allanallan Posts: 61,663Questions: 1Answers: 10,095 Site admin

    With regard to Bootstrap, you'd need to use a thirdparty module for Bootstrap since the one built into their framework does not support multiple modals being shown at the same time.

    For your jQuery UI option - perhaps you could add a class to the one you want to target so your CSS can use that in the selector, allowing it to pick out only one of the modals that is open.

    Allan

  • sdroulerssdroulers Posts: 43Questions: 14Answers: 0

    Thanks Allan.

    Totally agree about the thirdparty module for bootstrap.

    But in addition isn't there a limitation in the Bootstrap display controller of Datatables?

    I ask this question according to the following code in editor.bootstrap.js:

    "init": function ( dte ) {
    // init can be called multiple times (one for each Editor instance), but
    // we only support a single construct here (shared between all Editor
    // instances)
    if ( ! self._dom.content ) {
        self._dom.content = $(
            '<div class="modal fade">'+
                '<div class="modal-dialog">'+
                    '<div class="modal-content"/>'+
                '</div>'+
            '</div>'
        );
....
  • allanallan Posts: 61,663Questions: 1Answers: 10,095 Site admin
    Answer ✓

    Yes - since Bootstrap's modal only supports a single one at a time, there was no point in me coding a solution in the display controller for Bootstrap that would support multiple modals.

    If you use a modal library for Bootstrap that supports multiple views, a new display controller would be needed for it.

    Allan

  • sdroulerssdroulers Posts: 43Questions: 14Answers: 0

    Thanks Allan

This discussion has been closed.

DataTables

DataTables designed and created by SpryMedia Ltd.
© 2007-2023 MIT licensed. Privacy policy. Supporters.
SpryMedia Ltd is registered in Scotland, company no. SC456502.