Back to the graphical version

 Magnus Wedberg, design and photography

 
Home
Articles
Services
Photos
About
 
 

TinyMCE, margins, positioning and full screen mode
Some of you might also have this problem, which I now have spent several hours with: how to set the side margins of TinyMCE in full screen mode, if you want to have a pseudo-fullscreen-mode where some navigation is visible?

Here is the (well at least one) solution: fake it with padding, a margin and calc. This gives a 60px padding around the "full screen" textarea:

div.mce-fullscreen { padding-top: 60px; margin-left: 60px; padding-bottom: 60px; max-width: calc(100vw - 120px); }

Padding-top puts the top where it should be without affecting the footer. Margin-left positions the div. Calc takes the viewport and subtracts right + left space for a max-width that overrides TinyMCE's own width setting.

Yes, calc is indeed supported enough to use widely. I was surprised.


 All content copyright © Magnus Wedberg 2000 - 2019