CODEWITHSUNDEEP
csstinymceheighttinymce-4
JDR
JDR

Reputation: 1146

TinyMCE 4 and 100% Height Within Containing Element

I am in the process of migrating from TinyMCE 3 to 4.

However, I am getting stuck at making TinyMCE fill its 100% height container (it does work with TinyMCE 3).

Please note this fiddle: http://jsfiddle.net/MLJaN/

I used the CSS below to try and set the iframe and all of its parents to 100%-height. I agree it does not look ideal, but I would have thought it should work this way.

 body, html, .mce-tinymce, .mce-edit-area.mce-container, iframe, .mce-container-body.mce-stack-layout
 {
     height: 100% !important;
 }

As you can see in the live-fiddle, it is exactly the amount of pixels of the toolbar "too tall": i.e. it is 34px too tall (the toolbar's height).

This works, but it does not automatically resize with the browser and it uses calc() which is only about 79% supported right now: http://jsfiddle.net/MLJaN/2/

Now, I am looking for a pure CSS (no calc() function) solution to make the entire editor fill its container and be fluidly resizable.

Any pointers would be much appreciated.

Upvotes: 16

Views: 25295

Answers (10)

Maifee Ul Asad
Maifee Ul Asad

Reputation: 4607

For those, who are still struggling with it:

.tox-tinymce{
  height: 100% !important;
}

If they don't provide an API for that, CSS overriding is the most elegant solution for UI tweaking

Upvotes: 2

Maksim Borodov
Maksim Borodov

Reputation: 455

Auto-height for TinyMCE5

    <style>
      /*Container, container body, iframe*/
      .tox-tinymce, .tox-editor-container {
        min-height: 100% !important;
      }

      /*Container body*/
      .tox-sidebar-wrap {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
      }

      /*Editing area*/
      .tox-edit-area {
        position: absolute;
      }

      /*Footer*/
      .tox-tinymce .tox-statusbar {
        position: absolute !important;
        bottom: 0;
        left: 0;
        right: 0;
      }
    </style>

Upvotes: 0

r.enayati
r.enayati

Reputation: 1

#editor-wrapper {
    height: 100%;
}

#editor-wrapper .mce-tinymce.mce-container.mce-panel,
#editor-wrapper .mce-container-body.mce-stack-layout {
    height: 100%;
}

#editor-wrapper .mce-edit-area.mce-container.mce-panel.mce-stack-layout-item {
    height: calc(100% - 75px); /* 75 is tinymce header and footer height*/
}

#editor-wrapper iframe {
    height: 100% !important;
}

Upvotes: 0

chickens
chickens

Reputation: 22314

None fixed my problem as good as this one. It's combination of couple answers from the top.

$(window).on('resize', function () {
    setTimeout(function () {
        var max = $('.mce-tinymce').css('border', 'none').parent().height();
        max -= $('.mce-menubar.mce-toolbar').outerHeight(); 
        max -= $('.mce-toolbar-grp').outerHeight(); 
        max -= $('.mce-edit-area').outerHeight() - $('.mce-edit-area').height();
        $('.mce-edit-area').height(max);
    }, 100); 
});

And add resize trigger to init : 

tinymce.init({
    selector: '#tinymce',
    height: "100%",
    branding: false,
    statusbar: false,
    setup: function (ed) {
        ed.on('init', function(args) {
            $(window).trigger('resize');
        });
    }
});

Upvotes: 1

Ashutosh Jha
Ashutosh Jha

Reputation: 16357

In angular fixed by only this ,

@Component({
  selector: 'serta-tinymce',
  template: `<textarea **style="min-height:500px"** id="store-description"></textarea>`,
  styles: []
})

Upvotes: 0

Daveman
Daveman

Reputation: 1096

I solved this problem with pure CSS by using flex-boxes.

<style>
  #article, .mce-tinymce,.mce-stack-layout, .mce-edit-area{
    display: flex;
    flex-direction: column;
    flex: 1;
  }
   .mce-tinymce iframe{
    flex: 1;
  }
</style>

This way you don't have to care about the sizes of the menu-bar and other elements.

JSFiddle demo: https://jsfiddle.net/hk5a53d8/

Upvotes: 8

Andrew
Andrew

Reputation: 2861

I'm fine using CSS calc for the job. This worked for me:

.mce-tinymce, .mce-edit-area.mce-container, .mce-container-body.mce-stack-layout
{
    height: 100% !important;
}

.mce-edit-area.mce-container {
    height: calc(100% - 88px) !important;
    overflow-y: scroll;
}

Note the valud of 88px represents the combined height of the headerbar and statusbar.

Upvotes: -1

user4696486
user4696486

Reputation:

When you're a hammer, every problem looks like a nail. There's no need for javascript or jquery for this as the tags are there to work with. All that's needed is to adjust the margin on #mcu_31 to adjust for the height of the toolbar and footer. The following sets tinymce to be responsive in its containing element.

/*Container, container body, iframe*/
.mce-tinymce, .mce-container-body, #code_ifr {
    min-height: 100% !important;
}
/*Container body*/
.mce-container-body {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}
/*Editing area*/
.mce-container-body .mce-edit-area {
    position: absolute;
    top: 69px;
    bottom: 37px;
    left: 0;
    right: 0;
}
/*Footer*/
.mce-tinymce .mce-statusbar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}

Revised because TinyMCE changes the id's with menu/toolbar additions or deletions. This works no matter what you do with it.

Upvotes: 8

Kevin Day
Kevin Day

Reputation: 16383

For those of you not using jQuery, here's pure javascript code that works:

function doresize(){
    var ht = window.innerHeight;
    console.log("ht = " + ht);

    if (document.getElementsByClassName('mce-toolbar-grp')){
        ht += -document.getElementsByClassName('mce-toolbar-grp')[0].offsetHeight;
        ht += -document.getElementsByClassName('mce-toolbar-grp')[0].offsetTop;
        console.log("ht = " + ht);
    }
    if (document.getElementsByClassName('mce-statusbar')){
        ht += -document.getElementsByClassName('mce-statusbar')[0].offsetHeight;
        console.log("ht = " + ht);
    }

    ht += -3; // magic value that changes depending on your html and body margins

    if (document.getElementsByClassName('mce-edit-area')){
        document.getElementsByClassName('mce-edit-area')[0].style.height = ht + "px";
        console.log("ht = " + ht);
    }

}

window.onresize=doresize;
window.onload=doresize;

Upvotes: 3

Paul
Paul

Reputation: 1220

Instead of doing the calcs in the CSS I have moved them into JS. This means that the menubar height will automatically be calculated and doesn't need to be adjusted manually. It also makes this solution compatible with any browser even without css calc() support.

function resize() {
    setTimeout(function () {
        // Main container
        var max = $('.mce-tinymce')
              .css('border', 'none')
              .parent().outerHeight();

        // Menubar
        max += -$('.mce-menubar.mce-toolbar').outerHeight(); 

        // Toolbar
        max -= $('.mce-toolbar-grp').outerHeight(); 

        // Random fix lawl - why 1px? no one knows
        max -= 1;

        // Set the new height
        $('.mce-edit-area').height(max);
    }, 200); 
} 

$(window).on('resize', function () { resize(); });

But don't just take my word for it.

Try it on jsBin: http://jsbin.com/dibug/2/edit

For good reference I have also create a gist.

Upvotes: 4

Related Questions