What is meta? ×
Meta Stack Exchange is where users like you discuss bugs, features, and support issues that affect the software powering all 150 Stack Exchange communities.

Go to a site where you have inline post editing privileges. Make an answer, then delete it. Edit the deleted answer. You'll get something that looks like this:

eek

As you can see, the editor and the preview box are overflowing the right edge of the purplish deleted-post background. I assume this is not a desired behavior.

(Behavior observed on meta.Anime.SE in Chrome 32.0.1700.76 on Windows 7, with no userscripts active.)

share|improve this question

closed as off-topic by Ilmari Karonen, Werner, ᔕᖺᘎᕊ, James, Patrick Hofman Jun 24 at 12:49

This question appears to be off-topic. The users who voted to close gave this specific reason:

  • "The problem described here can no longer be reproduced. Changes to the system or to the circumstances affecting the asker have rendered it obsolete. If you encounter a similar problem, please post a new question." – Ilmari Karonen, Werner, ᔕᖺᘎᕊ, James, Patrick Hofman
If this question can be reworded to fit the rules in the help center, please edit the question.

    
Only few pixels but yeah, agree it should not overflow, especially not on Stack Overflow. ;) –  Shadow Wizard Jan 22 '14 at 17:37
1  
Ugly Overflows?? This seems like a real roundabout way to complain about the design of the sites! ;-) –  Andrew Barber Jan 22 '14 at 18:34
1  
This seems to have been fixed as a side effect of the recent general redesign. –  Ilmari Karonen Jun 23 at 21:11

1 Answer 1

The problem is simply that the borders and margins for the inline editor take up a few pixels more horizontal space than is normally available within the post area, causing them to overflow off the right edge. Normally this isn't really noticeable, since there's no visible boundary at the edges of the post area, but the pink background on deleted posts makes it very obvious.

Making the editor narrower isn't very practical, especially not for the preview area, which should simultaneously have the same inner width as the normal post area (to keep things like text wrapping consistent) and have a visible border on each side.

However, conveniently, there's plenty of space on the left side of the post area for the editor to expand into, if we just allow it to. The easiest way to do this is to give the editor <div> a small negative left margin, like this:

.inline-editor { margin-left: -4px }

While waiting for the SE devs to fix this, I have added the CSS rule above to the Stack Overflow Unofficial Patch, a collection of client-side CSS and JavaScript fixes packaged as a GreaseMonkey-style user script. If you're using a compatible browser (Firefox, Chrome, Opera, possibly Safari and others, but unfortunately not IE or most mobile browsers), please give it a try!

share|improve this answer

Not the answer you're looking for? Browse other questions tagged .