Nested editors - scrolling question on secondary editor

sdroulers

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 !

sdroulers

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

allan

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

sdroulers

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>'
        );
....

allan

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

sdroulers

Thanks Allan