editor - large window with bootstrap

montoyam

I am using bootstrap4 formatting and am not able to increase the size of the lightbox editor. I have tried the css in the example: https://editor.datatables.net/examples/styling/large.html

I am using a template for the editor and even tried to add 'container-fluid' class and col-12 to the template and that is not working either.

colin

As it's working in the link you referred to, it'll be something to do with your CSS - possibly local values over-riding. Please can you link to your page, or create a test case, so we're able to debug that.

Colin

montoyam

let me see if i can put a test case together. but could it be because the example in the link is not using bootstrap4? I tried doing an inspect to see what bootstrap calls the editor window and changed the code accordingly, but that didn't work or I did something wrong.

colin

Ah, yep, that will affect it. We'll take a look and report back,

Colin

montoyam

thank. i tried posting a test case but I didn't know how to add the library for Editor's Bootstrap

sinfuljosh

This can be done with a bootstrap class to be added to the same element that gets the .modal-dialog class.

I tried with displayNode() to get the element but I was not successful. So I used jquery selector.

editor
    .on( 'open', function () {
        $( “.modal-dialog” ).addClass( 'modal-xl' );
    } )
    .on( 'close', function () {
        $( “.modal-dialog” ).removeClass( 'modal-xl' );
    } );

Size - Class - Modal max width
Small - modal-sm - 300px
Default - None - 500px
Large - modal-lg - 800px
Extra large - modal-xl - 1140px

[BS4 Modal - Optional Sizes] https://getbootstrap.com/docs/4.6/components/modal/#optional-sizes

[Bootstrap4 - Extra Large Modal] http://live.datatables.net/cizohipo/1/edit
( the edit button doesn’t work because I was lazy and copied the script from Ajax data… but the new button launches the modal.)

allan

This will do it as well:

  $('div.modal-dialog', editor.displayNode()).addClass('modal-xl');

http://live.datatables.net/doruvahe/8/edit

Allan

montoyam

that worked perfectly!! thank you guys so much. and josh, thanks for the link to the bootstrap documentation.

sinfuljosh

Thanks Allan, this method is also how I expanded on the datatables bootstrap styling without having to modify the js file.