TinyMCE on Mobile Devices

Resolved glyndavidson
(@glyndavidson)

12 years, 3 months ago

Using any device/browser, if you make the window small enough, the TinyMCE buttons disappear off screen. As far as I can tell, this is forcing the text input area to expand beyond the dimensions of the screen. As a user types, the screen is forced to scroll to the right.

Using the twentyeleven theme, the page automatically adjusts for smaller screens so there is no scroll bar. To get back to the left side of the page, pressing Return at the end of a sentence works for me but I’ve had some users report that no matter what they do, they can’t get back to the left side of the page.

The TinyMCE in the dashboard however automatically adjusts to the screen-size. This in turn allows the text input area to adjust and removes the need to scroll.

Is it possible to replicate this functionality of the dashboard’s TinyMCE in the bbPress TinyMCE?

Many thanks

Glyn

https://ww.wp.xz.cn/plugins/bbpress-enable-tinymce-visual-tab/

Viewing 5 replies - 1 through 5 (of 5 total)

Plugin Author

(@jaredatch)

The WordPress dashboard likely contains customizes breaks and responsive tweaks to support TinyMCE on mobile.

This does not load in the base TinyMCE CSS when loaded on the front end. You’ll want to put similar CSS tweaks in your site’s theme.

Also, in WordPress 3.9, TinyMCE is upgraded to version 4.0 which might help with the mobile stuff (I haven’t tried it yet).

Thread Starter

glyndavidson

(@glyndavidson)

12 years, 3 months ago

Thanks Jared, all sorted now. Just as you suggested I copied the following lines from the dashboard css:

.mceToolbar * {
	white-space: normal!important
}
.mceToolbar tr, .mceToolbar td {
	float: left!important
}
.wp_themeSkin a.mceButton {
	width: 30px;
	height: 30px
}
.wp_themeSkin .mceButton .mceIcon {
	margin-top: 5px;
	margin-left: 5px
}
.wp_themeSkin .mceSplitButton {
	margin-top: 1px
}
.wp_themeSkin .mceSplitButton td a.mceAction {
	padding-top: 6px;
	padding-bottom: 6px;
	padding-left: 6px;
	padding-right: 3px
}
.wp_themeSkin .mceSplitButton td a.mceOpen, .wp_themeSkin .mceSplitButtonEnabled:hover td a.mceOpen {
	padding-top: 6px;
	padding-bottom: 6px;
	background-position: 1px 6px
}
.wp_themeSkin table.mceListBox {
	margin: 5px
}
div.quicktags-toolbar input {
	padding: 10px 20px
}
#wp-content-editor-tools {
	overflow: hidden;
	padding: 20px 15px 1px 0;
	top: 1px
}
a.wp-switch-editor {
	font-size: 16px;
	line-height: 1em;
	margin: 3px 0 0 7px;
	padding: 12px 15px
}
#wp-content-media-buttons a {
	font-size: 16px;
	line-height: 37px;
	height: 39px;
	padding: 0 20px 0 15px
}
.wp-media-buttons span.wp-media-buttons-icon, .wp-media-buttons span.jetpack-contact-form-icon {
	width: 22px!important;
	margin-top: -3px!important;
	margin-left: -5px!important
}
.wp-media-buttons .add_media span.wp-media-buttons-icon:before, .wp-media-buttons #insert-jetpack-contact-form span.jetpack-contact-form-icon:before {
	font-size: 20px!important
}

TinyMCE in bbPress now responds to screen size

Plugin Author

Jared Atchison

(@jaredatch)

12 years, 3 months ago

Awesome, that’s great to hear.

I appreciate you posting the CSS. This will be helpful for anyone else who encounters this issue and wishes to add responsive support.