Editor Modal Width in Bootstrap 4

Editor Modal Width in Bootstrap 4

_Ronnie__Ronnie_ Posts: 19Questions: 5Answers: 0

Is there a way to increase the modal width? At present, the width is 500px, which is the size of a BS4 standard modal. Can it be increased to modal-lg?

Many thanks for your help in advance.

Kind regards

Replies

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

    These threads, here and here, should do the trick,

    Colin

  • _Ronnie__Ronnie_ Posts: 19Questions: 5Answers: 0

    Thanks a lot!

  • Chandler242Chandler242 Posts: 36Questions: 12Answers: 0

    The first thread is to create a custom template. I wonder if there is a simpler way to just increate the modal width without creating the template.

    Regards,

    YL

  • kthorngrenkthorngren Posts: 20,139Questions: 26Answers: 4,735

    Did the answer to your same question in your other thread not help?

    I would suggest inspecting the modal element to see what CSS is being applied and override the appropriate CSS in your style section.

    Kevin

  • Chandler242Chandler242 Posts: 36Questions: 12Answers: 0

    I included what is suggested in the thread you mentioned in my CSS

    div.DTE_Inline input {
      width: 1200px
    }
    
    

    Nothing changed with my Editor modal.

    By the way I didn't locate div.DTE_Inline input in editor.bootstrap4.css. I did see div.DTED_Lightbox_Wrapper in editor.datables.css as suggested in other threads with the editor default styling.

    I guess I was little bit confused that my question is essentially the same as Ronnie's and several others, but the suggested solutions are very different. I think I must be missing something.

    Thank you.

    YL

  • kthorngrenkthorngren Posts: 20,139Questions: 26Answers: 4,735

    Like I said right click on the modal and click Inspect. See this example:
    http://live.datatables.net/guwafemu/147/edit

    Inspecting the modal I found this:

    @media (min-width: 576px)
    .modal-dialog {
        max-width: 500px;
        margin: 1.75rem auto;
    }
    

    Looks like you can change the max-width in the inspector. Maybe overriding this CSS with the max-width you want will be what you need.

    Kevin

  • Chandler242Chandler242 Posts: 36Questions: 12Answers: 0

    Thank you very much, Kevin.

  • Chandler242Chandler242 Posts: 36Questions: 12Answers: 0

    Hey Kevin,

    I click on the modal and click Inspect. I didn't find

    @media (min-width: 576px)
    
    

    I found .modal-dialog like this:


    .modal-dialog { position: relative; width: auto; margin: .5rem; pointer-events: none; }

    Also all the properties are dimmed and I couldn't change them. I guess I must still be missing something.

    Regards,

    YL

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

    This thread has an example - see Kevin's example here updated with the suggested CSS.

    Colin

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

    It also looks like Allan replied on your other thread asking the same question.

    Colin

  • Chandler242Chandler242 Posts: 36Questions: 12Answers: 0

    Hey,

    I got my problem solved using the threads suggested above.

    Thank you everybody.

    Regards,

    YL

This discussion has been closed.