Click for text version
Magnus Wedberg / home

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.

photos articles services about