CODEWITHSUNDEEP
javascriptcsstinymcetinymce-4
Ahmed
Ahmed

Reputation: 1590

How to control the width and Height of tinyMCE modal?

I use plugin link of tinyMCE to insert links but the problem that it is very small

enter image description here

How can I contol its size ? My init code

tinymce.init({
        target: this,
        plugins: "table, link, textcolor",
        toolbar: [
            'undo redo | bold italic | bullist | numlist | tabel | link | forecolor | fontsizeselect | Extra',
        ],
        fontsize_formats: '8pt 10pt 12pt 14pt 18pt 24pt 36pt',
        setup: function (editor) {
            editor.addButton('Teksten', {
                type: 'menubutton',
                text: 'Extra',
                icon: false,
                menu: createTempMenu(editor)
            });
        }
 });

Upvotes: 4

Views: 2186

Answers (2)

LordM
LordM

Reputation: 41

I had the same issue for months if not years, without any solution. But i think i finally cracked it. In my case i was using materilazie.css and it has this for all input fields:

input:not([type]),
input[type=text]:not(.browser-default):not(.mce-textbox),
input[type=password]:not(.browser-default):not(.mce-textbox),
input[type=email]:not(.browser-default):not(.mce-textbox),
input[type=url]:not(.browser-default):not(.mce-textbox),
input[type=time]:not(.browser-default):not(.mce-textbox),
input[type=date]:not(.browser-default):not(.mce-textbox),
input[type=datetime]:not(.browser-default):not(.mce-textbox),
input[type=datetime-local]:not(.browser-default):not(.mce-textbox),
input[type=tel]:not(.browser-default):not(.mce-textbox),
input[type=number]:not(.browser-default):not(.mce-textbox),
input[type=search]:not(.browser-default):not(.mce-textbox),
textarea.materialize-textarea {
    background-color: transparent;
    border: none;
    border-bottom: 1px solid #9e9e9e;
    border-radius: 0;
    outline: none;
    height: 3rem;
    width: 100%;
    font-size: 1rem;
    margin: 0 0 20px 0;
    padding: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}

The issue lies with the following two lines: input:not([type]), and width: 100%;

You see, the link field in the tinymce popup is an input without a specified type. Therefore the width of the field will be set to 100%. Given the complex resizing logic behind tinymce, the popup receives the width of 222px (inline css) (or at least in my case, but the screenshot in the questions looks exactly what i had)

Once I removed the width element the popup loaded just fine (but everything else became ugly :) ) Upon further investigation I found that tinymce adds the class "mce-textbox" to the input field.

So here is what I added to my css file

input:not([type]).mce-textbox {
    width: inherit;
}

This overrides the width:100% part and allows tinymce to measure the width correctly and set the width of the popup as it should. Given the fact that the main css still have some effect on the popup input fields - the overall look and feel is still not the original tinymce style - but at least the popups are now back to their normal sizes.

Note: I am by no means a frontend developer, therefore I am sure there is a better, more elegant solution for this issue. but at least we know where to look now.

I hope this helps (though I know the question is rather old now :) )

Upvotes: 4

Ahmed
Ahmed

Reputation: 1590

I solved by add custom css

.mce-window-body {
  width: inherit !important;
}

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

.mce-window{
   width: 30% !important;
   left: 50% !important;
   top: 50% !important;
   margin-left: -15% !important;
   margin-top: -150px !important;
}

But i don't consider this as answer as till now i don't know why it is displayed small

Upvotes: 1

Related Questions