DFW editor: horizontal scrollbar appears when inserted image is wider than content width

[hd-J]

In the DFW editor, the width of the container #wp-fullscreen-wrap is determined by the $content_width of the theme, plus some padding (22px).

When the content width is large enough (>518px), there are no display issues.

But when the width is smaller than 518px, an horizontal scrollbar appears at the bottom of the editor (see attached screenshot)

Would there be a way to set a minimum width for the DFW editor?

• Tested with the latest version of trunk, with Twenty Eleven and a custom theme.
• Maybe related to #18138

[hd-J]

DFW Editor with an horizontal scrollbar

[azaozz]

Don't see this happening in FF and Chrome (Win7) with Twenty Eleven. Perhaps something to do with the theme's editor-style.css? Also DFW can be resized horizontally with Alt + and Alt - (Alt 0 to reset).

[hd-J]

Sorry if I wasn't clear enough. The problem won't appear with Twenty Eleven, since its content width is larger than 518px. You can only reproduce with themes with content width smaller than 518px.

[azaozz]

Re-tested with couple of other themes, still no horizontal scrollbar with $content_width = 450;. Could you make sure this is not some kind of interference from the theme's editor-style.css or perhaps another TinyMCE plugin that loads css into the editor iframe. The themes I tested with were without editor-styles.

[hd-J]

My tests were done with ​Tarski, that doesn't include any editor-style.css) on a clean install without any plugins.

I did some further testing, and It turns out 'this problem only happens when you insert an image larger than the content width'.

In Twenty Eleven, the problem is fixed with a bit of CSS in editor-style.css:

img[class*="wp-image-"] {
height: auto;
max-width: 97.5%;
}

But in themes that don't include such fixes, it adds an horizontal scrollbar to DFW.

Would it be reasonable to prevent the problem from happening in core, rather than fixing it theme by theme, in editor-style.css? I am not 100% sure in which css file it should go though...

[hd-J]

Add image style to avoid horizontal scrollbars in DFW

[azaozz]

Nice catch. Not sure if we should add that to the DFW css though.

For themes that don't have editor-style, if you insert a large image in the visual editor it would still make a horizontal scrollbar like in DFW. The unknown part is whether the theme actually scales larger images on the front-end.

So we may end up showing scaled down images in the editor but they would be unscaled on the front-end breaking the theme, and the user would not be aware of that.

Another option may be to pass $content_width along with the above css to the editor and assume that if a theme sets $content_width it would also limit the images to the same width. That would be less risky, but still best is to have editor-style in the theme.

[helenyhou]

I don't see why core should be altering the sizes of images you insert into a post just because you're in fullscreen mode. Note that this would change the view between regular and fullscreen editing, and may not accurately reflect what would happen on the front end if you inserted an image wider than the content width. If inserting a large image would overflow the layout, the editor should reflect that.

To me this seems very much something a theme author needs to address, as treatment can vary between themes (padding, border, etc.). Twenty Eleven's styling is specific to the visual treatment of images and responsive nature of the theme, and doesn't apply to all images, either.

[hd-J]

Replying to helenyhou:

If inserting a large image would overflow the layout, the editor should reflect that.

That seems fair enough, I agree. At least the user will know that there is a chance their post might not look good once published.

[azaozz]

Wontfix as per the last two comments.