How to Make TinyMCE's modal dialogs Responsive?

Question

I'm working with TinyMCE4 on a responsive CMS using Bootstrap 3. I've noticed that the dialog/modals aren't responsive in TinyMCE4 which is a bit of a bummer. I started writing some simple CSS classes to override the fixed widths, but there appears to be tons which makes this an task that seems rather daunting. So, I thought that surely someone else has done this by now. Here is what I have so far, but there is are many many more selectors that have to be done for this to work.

So, question, has anyone else come up with a complete, fail safe way to make TinyMCE's dialog/modals responsive?

/* TINYMCE CUSTOMISATION */

.mce-window {
    max-width: 90% !important;
}



.mce-panel {
    max-width:100% !important
}

.mce-tabs {
    max-width: 100% !important;
}

.mce-container-body {
    max-width:100% !important;
}

.mce-container {
    max-width:100% !important;
}

Answer 1

TinyMCE 4 is not designer friendly (absolute positioned elements with inlined widths and heights). Frankly it's giving me flashbacks.

Having said that, use the following at yer own risk (a.k.a. test it and make sure it meets your needs). I came up with this quickly to get an acceptable look and feel for the image, link and media dialogs in Chrome on Android. If it works in iOS or older versions of Android, or happens to not totally hose other dialogs then yay, but that wasn't my primary goal.

Good luck. Perhaps TinyMCE 5 dialogs will have sane HTML and CSS out of the box.

@media only screen and (max-device-width: 549px) {

    #mce-modal-block {
    }

    .mce-window {
        width: auto !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        background: none !important;
    }

    .mce-window-head {
        background: #fff !important;
    }

    .mce-window-body {
        background: #fff !important;
    }

    .mce-foot {
    }

        .mce-foot > .mce-container-body {
            padding: 10px !important;
        }

        .mce-foot button {
        }

    .mce-panel {
        max-width: 100% !important;
    }

    .mce-container {
        max-width: 100% !important;
        height: auto !important;
    }

    .mce-container-body {
        max-width: 100% !important;
        height: auto !important;
    }

    .mce-form {
        padding: 10px !important;
    }

    .mce-tabs {
        max-width: 100% !important;
    }

        .mce-tabs .mce-tab, .mce-tabs .mce-tab.mce-active {
        }

    .mce-formitem {
        margin: 10px 0 !important;
    }

    .mce-btn > button {
    }

    .mce-abs-layout-item {
        position: static !important;
        width: auto !important;
    }

        .mce-abs-layout-item.mce-label {
            display: block !important;
        }

        .mce-abs-layout-item.mce-textbox {
            -webkit-box-sizing: border-box !important;
            -moz-box-sizing: border-box !important;
            box-sizing: border-box !important;
            display: block !important;
            width: 100% !important;
        }

        .mce-abs-layout-item.mce-combobox {
            display: flex !important;
        }

            .mce-abs-layout-item.mce-combobox > .mce-textbox {
                -ms-flex: 1 1 auto;
                -webkit-flex: 1 1 auto;
                flex: 1 1 auto;
                height: 29px !important;
            }
}

Answer 2

I've just spent a few hours making my own CSS to make TinyMCE's modal windows responsive whilst maintaining the nicer styling. It just resizes everything down to mobile size once the browser width goes below 515px (the standard size of the modal windows).

It should work on any phone screen 320px wide or above. Hope this helps someone. Feel free to edit if you can improve it in any way.

Only tested on TinyMCE v4.4.3 using Google Chrome v54

@media screen and (max-width: 515px) {
    .mce-window {
        max-width: 320px !important;
        left: calc(50% - 160px) !important;
    }
    .mce-window-body {
        max-width: 100% !important;
        min-height: 230px !important;
    }
    .mce-container.mce-panel.mce-abs-layout-item,
    .mce-container.mce-panel.mce-abs-layout-item .mce-container-body.mce-abs-layout {
        max-width: 100% !important;
        min-height: 190px !important;
    }
    .mce-flow-layout {
        text-align: center !important;
    }
    .mce-flow-layout-item.mce-btn-group {
        border-left: none !important;
    }
    .mce-panel,
    .mce-panel > .mce-container-body,
    .mce-foot,
    .mce-foot > .mce-abs-layout {
        max-width: 320px !important;
        text-align: center;
    }
    .mce-formitem {
        width: 300px !important;
        left: 10px !important;
        display: block !important;
    }
    .mce-formitem:nth-child(2) {
        top: 10px !important;
    }
    .mce-formitem:nth-child(3) {
        top: 50px !important;
    }
    .mce-formitem:nth-child(4) {
        top: 90px !important;
    }
    .mce-formitem:nth-child(5) {
        top: 130px !important;
    }
    .mce-formitem:nth-child(6) {
        top: 170px !important;
    }
    .mce-container.mce-form.mce-abs-layout-item .mce-container-body.mce-abs-layout .mce-container.mce-form.mce-abs-layout-item {
        top: 40px !important;
        left: 0 !important;
        height: 160px !important;
    }
    .mce-formitem label {
        width: 106px !important;
        font-size: 13px !important;
        left: 0px !important;
    }
    .mce-multiline {
        max-width: 290px !important;
    }
    .mce-checkbox {
        top: 40px !important;
        left: 0 !important;
    }
    .mce-label {
        font-size: 13px !important;
    }
    .mce-foot .mce-btn-has-text {
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
        display: inline-block !important;
        margin: 10px 5px !important;
    }
    .mce-abs-layout-item input {
        max-width: 150px !important;
    }
    .mce-abs-layout-item.mce-has-open input {
        max-width: 118px !important;
    }
}