editor - large window with bootstrap

editor - large window with bootstrap

montoyammontoyam Posts: 568Questions: 136Answers: 5
edited January 2022 in Editor

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.

This question has accepted answers - jump to:

Answers

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    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

  • montoyammontoyam Posts: 568Questions: 136Answers: 5

    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.

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

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

    Colin

  • montoyammontoyam Posts: 568Questions: 136Answers: 5

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

  • sinfuljoshsinfuljosh Posts: 25Questions: 0Answers: 5
    edited January 2022 Answer ✓

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

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin
    Answer ✓

    This will do it as well:

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

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

    Allan

  • montoyammontoyam Posts: 568Questions: 136Answers: 5

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

  • sinfuljoshsinfuljosh Posts: 25Questions: 0Answers: 5

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

Sign In or Register to comment.