4

If you go to the question https://stackoverflow.com/questions/15551790/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?
Improve this question
11
  • 2
    How long did it take you to come up with that sample sentence? ;)
    – JonW
    Mar 21, 2013 at 15:46
  • 7
    It's much more than 2px on my browser (Chrome on Mac). I suppose it depends on the font as well.
    – JJJ
    Mar 21, 2013 at 15:51
  • @Juhana: fair; I'm in Firefox on Windows XP.
    – DiMono
    Mar 21, 2013 at 15:52
  • 1
    It's about 4px for me on Chrome/Mac.
    – Linuxios
    Mar 21, 2013 at 16:02
  • Do different browsers interpret % font sizes differently? Or does it really just come down to the installed font?
    – DiMono
    Mar 21, 2013 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, 2013 at 17:26
  • 4
    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, 2013 at 17:27
  • Widening the question area may also help with this issue.
    – yoozer8
    Mar 21, 2013 at 17:40
  • 1
    Yeah, it's actually 6px for me.
    – Doorknob
    Mar 21, 2013 at 20:59
  • Related: What is the average number of characters in a Code block before scroll bars appear?
    – Arjan
    Mar 21, 2013 at 22:51
  • I keep the zoom value at 90%. =)
    – hjpotter92
    Mar 22, 2013 at 0:03

3 Answers 3

Reset to default
8

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.

Improve this answer
3

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

Improve this answer
1

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.

Improve this answer
1
  • +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, 2013 at 0:36

You must log in to answer this question.

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