Lightbox editing with Bootstrap modal

stuartsjb-icr

I've got an editable "pop-up" table I'm using in a Bootstrap modal, but am having difficulty editing data when using the lightbox editor.

While I'm able to alter my select box values, I'm unable to select or edit the text fields.

I thought this may have been a CSS z-index issue but have so far been unable to rectify the problem; I tried changing the div.DTE_Field_InputControl z-index value to a high number but this hasn't helped.

/*Alterations to DataTables Editor Lightbox to layout fields in two columns on pop-out editor window*/
/* https://editor.datatables.net/examples/styling/columns.html */

div.DTE_Body div.DTE_Body_Content div.DTE_Field {
    float: left;
    width: 50%;
    padding: 5px 20px;
    clear: none;
    box-sizing: border-box;
}

div.DTE_Body div.DTE_Form_Content:after {
    content: ' ';
    display: block;
    clear: both;
}

div.DTED_Lightbox_Wrapper {
    left: 1em;
    right: 1em;
    margin-left: auto;
    margin-right: auto;
    width: 75%;
    z-index: 10000;
}

div.DTE_Field_InputControl {
    z-index: 2000050;
}

allan

Are you able to give me a link to a page showing the issue please?

Thanks,
Allan

stuartsjb-icr

I'm afraid the site runs on our intranet server only and is not accessible from outside the domain here.

I shall try and replicate the issue on live.datatables.net if possible and get back to you!

stuartsjb-icr

Hi Allan,

I've done a quick and dirty replication of my code here:

http://live.datatables.net/rafozexe/1/edit?html,css,js,output

As you can see the editor lightbox window will pop up and over the Modal but the input boxes cannot be selected or edited.

Removing the custom CSS alterations I've added for the lightbox results in the editor lightbox appearing underneath the Modal...

allan

Its being caused by this in Bootstrap:

c.prototype.enforceFocus = function() {
        a(document).off("focusin.bs.modal").on("focusin.bs.modal", a.proxy(function(a) {
            this.$element[0] === a.target || this.$element.has(a.target).length || this.$element.trigger("focus")
        }, this))
    }
    ,

Basically it is spotting any focus event that is outside of its modal and removing that focus. It doesn't appear to be configurable unfortunately and is presumably in part due to the fact you can't have two Bootstrap modals shown at the same time.

I'm afraid there isn't much I can do about this one

Allan

stuartsjb-icr

No worries, thanks for looking into it for me.

sergtop

Had the same problem.
I`ve solved it by adding

editor.on( 'open', function ( e, mode, action ) {
  $('#underlying-modal-id').modal('hide');
} );

 editor.on( 'close', function () {
  $('#underlying-modal-id').modal('show');
} );