Editor Modal Width in Bootstrap 4

_Ronnie_

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

colin

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

Colin

_Ronnie_

Thanks a lot!

Chandler242

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

kthorngren

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

Chandler242

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

kthorngren

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

Chandler242

Thank you very much, Kevin.

Chandler242

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

colin

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

Colin

colin

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

Colin

Chandler242

Hey,

I got my problem solved using the threads suggested above.

Thank you everybody.

Regards,

YL