Home › Forums › Weaver Xtreme Theme › mceContentBody – Problem with width on iPads
- This topic has 9 replies, 3 voices, and was last updated 7 years, 4 months ago by
Weaver.
-
AuthorPosts
-
March 31, 2015 at 07:15 UTC - Views: 3 #17547
finnj
ParticipantHi,
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)March 31, 2015 at 07:20 UTC - Views: 1 #20970finnj
ParticipantHere is a screenshot from my site wpfrontier.com
March 31, 2015 at 07:21 UTC - Views: 2 #20971finnj
ParticipantTrying again with screenshot:
March 31, 2015 at 16:45 UTC - Views: 2 #20972scrambler
ModeratorIf this is about the admin view of the content editor on ipad, @weaver would have to be involved
March 31, 2015 at 18:02 UTC - Views: 2 #20973finnj
Participantit is actually the wp_editor (tinymce) used in frontend.
March 31, 2015 at 18:44 UTC - Views: 3 #20974Weaver
KeymasterI 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?
March 31, 2015 at 20:03 UTC - Views: 2 #20975finnj
ParticipantHi 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.
March 31, 2015 at 20:39 UTC - Views: 3 #20976finnj
ParticipantOk 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
March 31, 2015 at 20:42 UTC - Views: 2 #20977scrambler
ModeratorAs far as I know, no CSS placed in the Theme options (CSS+ boxes or Custom CSS rule box can apply to the Admin side.
March 31, 2015 at 23:57 UTC - Views: 2 #20978Weaver
KeymasterThe 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.
-
AuthorPosts
- You must be logged in to reply to this topic.