WYSIWYG field size

jeff.walberg's Avatar


23 Feb, 2015 06:46 PM

We're beginning to use an internal stylesheet so that when users are editing the main body content of a page the styles match our live published pages fairly closely. The only problem is that if they are using a wide display, which is typical, the WYSIWYG input field is much wider than the content width of our published page. This gives the user an unrealistic view of their paragraph lengths, table widths, floated images, etc.

Is there a way to set a maximum or default width on the WYSIWYG input field?

  1. 1 Posted by Ryan Griffith on 23 Feb, 2015 07:52 PM

    Ryan Griffith's Avatar

    Hi Jeff,

    Currently, there is no way to specify the default size of the actual WYSIWYG editor.

    That being said, if you have a CSS file attached to the WYSIWYG, what you can do is try adding a max-width style to the body element to prevent the content from being fluid with the editor.

    When you have a moment, try something like the following and let me know how it works out:

    body {
        max-width: 700px;

    Please let me know if you have any questions.


  2. 2 Posted by jeff.walberg on 23 Feb, 2015 08:36 PM

    jeff.walberg's Avatar

    That's perfect!

    On a related note, I have been able to apply font-size, line-height and color to the body element. However, I haven't been able to get it to accept font-family for some reason. It's not a huge problem because I just added font-familty selectors to all the appropriate elements, but it would be nice to have a default font-family.

  3. 3 Posted by Ryan Griffith on 23 Feb, 2015 08:50 PM

    Ryan Griffith's Avatar

    Hm, you definitely should be able to provide font-family, we're doing it in one of our example Sites we ship with our base database.

    Are you using an external font or overwriting it somewhere else by chance?


  4. 4 Posted by jeff.walberg on 24 Feb, 2015 06:21 PM

    jeff.walberg's Avatar

    I don't think so, but I'll play with it some more when I get a chance. Not a high priority at the moment

  5. 5 Posted by Ryan Griffith on 24 Feb, 2015 08:04 PM

    Ryan Griffith's Avatar

    Sounds good, Jeff. Please keep me posted on your findings.

    One way to tell would be to right click on the WYSIWYG's toolbar to inspect the element, then locate the <iframe> generated by TinyMCE. Once you dive down into the iframe's content you can see if the body element has a font-family added to it.

    Please let me know if you have any questions.


  6. Ryan Griffith closed this discussion on 05 Mar, 2015 07:53 PM.

Comments are currently closed for this discussion. You can start a new one.

Keyboard shortcuts


? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac