Home Forums Weaver Xtreme Theme mceContentBody – Problem with width on iPads

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
  • #17547


    I am facing a problem where the editor area with is too wide on iPads. I am using plugin Frontier Post (I am the plugin author) to add/edit posts from the frontend.
    it is only the content area that overflows past the right sidebar (Using right sidebar setup), the button area resizes correctly.
    I am using latest version of Weaver Xtreme (1.1)
    I can resize my browser windows in all possible sizes on my mac, and the content area renders perfectly (Safari/Firefox)
    On iPads it doesnt work (Safari & Crome).
    The content area sits inside a table with width 96%
    I have tried to troubleshoot using Firefox Inspect Element, but as this only can be used on PC/Mac it doesnt really help.
    One thing I noticed about the width is that if I resize the browser window the width (943.158px) doesn’t change, so it seems like the browsers on mac respects the max-width, but the iPad browsers doesnt – Below is the css from Inspect element.
    As the css is auto generated html inline, i cant really change anything my self to test.  

    html .mceContentBody {
    max-width: 96%;
    width: 943.158px;

    I the front edit rendering works fine on other themes (Twenty XX, Suffusion & Responsive)

    Here is a screenshot from my site wpfrontier.com


    Trying again with screenshot:


    If this is about the admin view of the content editor on ipad, @weaver would have to be involved


    it is actually the wp_editor (tinymce) used in frontend.


    I actually don’t quite understand how you’d get the theme’s css into a plugin as the theme uses dynamic php generated css just when the editor is invoked from the page/post editor page.

    But the standard page/post editor works as expected on an iPad. So this is an issue only with the plugin? Is you screen shot when Weaver Xtreme is activated?

    And actually, what I get on a desktop is a horizontal scroll bar at the bottom of the plugin edit window, and not a responsively down-width’ed window.

    If I manually change the width to say 400px, the edited text will fit within the window. There does seem to be a bug in the generated style – fractional px, but changing that doesn’t change anything. So I think your evaluation is correct – desktop browsers are honoring the max width (but adding a horizontal scroll bar), but iPad isn’t. Don’t know how to do anything about that.

    The code that generates  the tinyMCE style is called editor-style-css.php if you want to fiddle with what gets generated just to try to figure things out. Might be adding a new rule that adds a #content to the html .mceContentBody rule might help? Just 98% or something?


    Hi weaver,

    Yes the screenshot is with Weaver Xtreme activated, I use your theme on my own site http://www.wpfrontier.com

    My plugin is this one: https://wordpress.org/plugins/frontier-post/

    I believe you misunderstood me (or more likely, I didnt express myself correctly) I am not importing any css into the plugin.

    What i tried to refer to was the dynamic generated css.

    I have no wish to start fiddling with your code, I was just trying to find as much info as possible to help you fix this.

    Desktop browsers does not add a scroll bar, they resize the content area, iPad browser dont.



    Ok I couldn’t help myself so I tried looking at editor.style-css.php and removed the width parameter:

    if (($val = weaverx_mce_opt('twidth'))) {
    //echo "html .mceContentBody {max-width:96%;width:" . $val . "px;}n";
    echo "html .mceContentBody {max-width:96%;}n";


    and it seems to work both on iPad and browser.

    I would prefer if I could get the same result with custom css in the theme options, as changing the theme php code is bad practice.

    I tried to override the width by:

    html .mceContentBody {width:96% !important;

    but no effect


    As far as I know, no CSS placed in the Theme options (CSS+ boxes or Custom CSS rule box can apply to the Admin side.


    The problem is that that width code makes the normal Page/Post editor display the post using the size that will appear on the regular site, and so is essential.

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.