mceContentBody – Problem with width on iPads

[finnj]

Hi,

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)

[finnj]

Here is a screenshot from my site wpfrontier.com

[finnj]

Trying again with screenshot:

[scrambler]

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

[finnj]

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

[Weaver]

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?

[finnj]

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.

[finnj]

@weaver

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

[scrambler]

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.

[Weaver]

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.

[Author]

Posts