Make WordPress Core

Opened 9 years ago

Closed 9 years ago

Last modified 9 years ago

#20641 closed defect (bug) (wontfix)

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

Reported by: hd-J Owned by: azaozz
Milestone: Priority: normal
Severity: normal Version: 3.2
Component: Editor Keywords: has-patch close
Focuses: Cc:


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

Attachments (2)

dfw-editor-scrollbar.png (14.3 KB) - added by hd-J 9 years ago.
DFW Editor with an horizontal scrollbar
wp-fullscreen.diff (317 bytes) - added by hd-J 9 years ago.
Add image style to avoid horizontal scrollbars in DFW

Download all attachments as: .zip

Change History (13)

9 years ago

DFW Editor with an horizontal scrollbar

#1 @azaozz
9 years ago

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).

#2 @hd-J
9 years ago

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.

#3 @nacin
9 years ago

  • Version changed from 3.4 to 3.2

#4 @azaozz
9 years ago

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.

#5 @azaozz
9 years ago

  • Keywords reporter-feedback added; needs-patch removed

#6 @hd-J
9 years ago

  • Keywords has-patch added; reporter-feedback removed

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...

Last edited 9 years ago by hd-J (previous) (diff)

9 years ago

Add image style to avoid horizontal scrollbars in DFW

#7 @azaozz
9 years ago

  • Owner set to azaozz
  • Status changed from new to reviewing

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.

#8 follow-up: @helenyhou
9 years ago

  • Keywords close added
  • Summary changed from DFW editor: horizontal scrollbar appears when content width is too small to DFW editor: horizontal scrollbar appears when inserted image is wider than content width

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.

#9 in reply to: ↑ 8 @hd-J
9 years ago

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.

#10 @azaozz
9 years ago

  • Resolution set to wontfix
  • Status changed from reviewing to closed

Wontfix as per the last two comments.

#11 @helenyhou
9 years ago

  • Milestone Awaiting Review deleted
Note: See TracTickets for help on using tickets.