Bootstrap 4 Editor Modal Width with CKEditor - (DT 1.10.16, Editor 1.6.5, BS4-Beta, CKEditor 4.7.3)

maliwik

Versions:
jQuery 3.2.1
Bootstrap 4.0.0-beta
DataTables 1.10.16
Editor 1.6.5
CKEditor 4.7.3

I've been trying a number of different things to try to get the width of the modal window to expand with the page. I'm using the Full Package in CKEditor and when I click the New button, the modal comes up with the CKEditor set to only the width of the other input fields with all of the buttons forcing the modal to scroll down (that's a lot of buttons!). I could probably set the width of the other input fields to adjust this, but I was hoping there would be a more elegant solution.

I'm using Bootstrap so my site will be responsive, so hard-coding specific pixel values for width isn't really a clean fix. Are there any ways I could perhaps set it to a percentage of the viewport? I've tried doing that on various CSS class selectors but either the modal window showed up at the bottom of the page or it wound up being offset to the left or right depending on the selector.

I was hoping there was some kind of specific auto width I could pass to the modal window through DataTables, but I'm not sure if that's within the scope of Editor's function itself.

maliwik

Does anybody know a solution to this?

allan

I might be wrong, but I don't see any mention of how the model width can be controlled in Bootstrap 4's documentation. Is there a way that you are aware of that isn't just a CSS hack, which seems like it might be the way forward if this isn't a documented feature in Bootstrap.

Allan

maliwik

I haven't found anything other than just a CSS hack. The following is working well right now:

div.modal-dialog {
  max-width: 100%;
  width: 75%;
}
    
div.modal-dialog .col-lg-4.col-form-label{
  flex: 0 0 15%;
  max-width: 15%;
  text-align: right;
}
div.modal-dialog .col-lg-8{
  flex: 0 0 85%;
  max-width: 85%;
}

This allows the modal to fill most of the page, and also fixes the obnoxiously huge (I felt) label widths. I then added the following options to the DataTables Editor field:

"opts": {
  "height": 500,
  "resize_maxWidth": 2000
}

I'm still monkeying with the responsiveness of the CKEditor so people can resize the modal dynamically simply by resizing CKEditor, so the maxWidth option on that isn't working as is. If I figure it out, I'll reply to the thread.