Meta Stack Exchange is where users like you discuss bugs, features, and support issues that affect the software powering all 157 Stack Exchange communities.

What is meta?
Here's how it works:
  1. Any Stack Exchange user can ask a question
  2. The community provides support, votes on ideas, and reports bugs
  3. Your voice helps shape the way Stack Exchange operates

If you go to the question replace values in an array (after my edit goes through) you'll notice that the second code area has a scrollbar because the contents are 2px too wide for the area it's in. This seems odd to me, because the contents use a fixed-width font. Could the width be expanded by 2px to account for the last couple pixels of the last character in such a situation? It just seems visually odd to be able to scroll for 2px in a field with fixed-width characters.

This is a sample code space to illustrate my point; why can I scroll for 2 pixels?
share|improve this question
How long did it take you to come up with that sample sentence? ;) – JonW Mar 21 '13 at 15:46
It's much more than 2px on my browser (Chrome on Mac). I suppose it depends on the font as well. – Juhana Mar 21 '13 at 15:51
@Juhana: fair; I'm in Firefox on Windows XP. – DiMono Mar 21 '13 at 15:52
It's about 4px for me on Chrome/Mac. – Linuxios Mar 21 '13 at 16:02
Do different browsers interpret % font sizes differently? Or does it really just come down to the installed font? – DiMono Mar 21 '13 at 16:20
Don't we need to expand it further for the next person who wants to paste 83 characters instead of 82? And what of 84? – Wooble Mar 21 '13 at 17:26
I think this highly depends on browsers and screens, so changing it would simply create the same "problem" with a different configuration. – Bakuriu Mar 21 '13 at 17:27
Widening the question area may also help with this issue. – yoozer8 Mar 21 '13 at 17:40
Yeah, it's actually 6px for me. – Doorknob Mar 21 '13 at 20:59
I keep the zoom value at 90%. =) – hjpotter92 Mar 22 '13 at 0:03
up vote 8 down vote accepted

This can't be fixed for everyone. It's completely dependent on which font you actually end up using and how your browser renders that font. There are actually quite a number of different fonts that could be chosen based on what's installed on your system:

font-family: Consolas, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif

Sorry, but there's nothing anyone can do. You'll have to set some custom user styles for your specific situation if it really bothers you that much.

share|improve this answer

That's actually the padding on the <pre> block not the width that pushes it off. It may be a better fix to adjust the padding to either 2px or 1%. The below shows what it's like with 2px:

enter image description here

share|improve this answer

The reason that those extra pixels seem to be there is from the padding. This is perfectly natural and I would argue that it is by-design. I say that because once you reach a certain width, the scrollbar starts. Sure it is possible that every once in a while the scroll is only a few pixels but the majority of the time it is a longer scrollbar. Adjusting it by 2 pixels would just mean if you added one more character in there it would start scrolling then for only a few pixels.

Consider a user who zooms. When I zoom my screen 10% in then I no longer see a scrollbar as I would assume users with a widescreen might also not see the scrollbar for 2px.

As a result of this expected behavior when I use code blocks I always try to ensure that I put in explicit line breaks when appropriate to prevent any scrolling behavior, as I think most users do.

share|improve this answer
+1 for Adjusting it by 2 pixels would just mean if you added one more character in there it would start scrolling then for only a few pixels. – Doorknob Mar 22 '13 at 0:36

You must log in to answer this question.

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