9

Horizontal scrollbars on web sites and HTML apps are generally bad for usability and unwanted. It's reasonably common to find them cropping up unexpectedly and I'm in need of a way to quickly debug and remove them.

What is a quick and easy way to find offending HTML elements in your design?

Yes, you can go through your page deleting/hiding elements one by one until you find a suspect, but this is time consuming, especially if there are multiple offending elements. It would be great to click a shortcut or run a script and have all the suspected elements highlighted, outlined or printed to the console.

To clarify: the problem is not how to solve it, but how to detect it. I'd like a general solution which can work whenever this issue appears.

SamB
  • 9,039
  • 5
  • 49
  • 56
webextensions.org
  • 731
  • 6
  • 15
  • 2
    Install Google Chrome and use the developer tools to highlight any element on the page (F12 on windows). – Daniel Jan 03 '13 at 20:07
  • That is the approach I already use ... I'm expecting an automated solution with JavaScript – webextensions.org Jan 03 '13 at 20:13
  • 3
    It won't let me answer a closed question, but I like the solution suggested [here](http://stackoverflow.com/a/31458863/195835): `* { border: 1px solid #f00; }`. With a border on every element, you can easily see which are sticking out a little too far. – Simon East Sep 07 '15 at 06:54
  • I have found that using `body * { outline: 1px #f00 solid; }` seems to do a better job than `* { border: 1px #f00 solid; }` – MacMac Dec 07 '16 at 09:48
  • 2
    This question IS contructive! – Nabil Kadimi Jul 12 '17 at 09:45
  • This gist contains an example of automated horizontal scroll culprit element discovery: https://gist.github.com/craigmj/402f97f5b43c701aec52d444045f7bef Just copy the script to your page, and watch the console output on load. – craigmj Nov 28 '19 at 16:36

2 Answers2

5

In a narrower scope, you can use jQuery (to get the width) and node.scrollWidth to get nodes that have content that overflow their bounds.

http://jsfiddle.net/tomprogramming/v3Q6W/3/

Thomas Jones
  • 4,892
  • 26
  • 34
0

If you let your content flow, you won't get horizontal scroll bars in the first place. Don't put too many width constraints. Usually, you only set the (minimum) width of the main column containing all your content. You might also constrain the width of some vertical bars (e.g. navigation bars). Otherwise, use CSS width property (and other such mechanisms) sparingly.

The CSS white-space property also tends to necessitate scrollbars; use this property judiciously. This is really only for formatting code, where it is important to maintain line breaks as they appear in HTML source for alignment purposes.

allyourcode
  • 21,871
  • 18
  • 78
  • 106
  • 1
    The problem is not how to solve it ... my question is how to detect it (I've added my intention for it in the edit of this question) – webextensions.org Jan 03 '13 at 20:22
  • I know this doesn't answer your question exactly, but it might solve your problem. Your idea of how to solve your problem is to find the horizontal scroll bars and get rid of them. My idea is to not create them in the first place, using recommended web practices.. – allyourcode Jan 03 '13 at 20:41
  • yes your intention is right ... to get rid of the real problem ... but i wish to minimize the time required to identify the problematic component ... after that, the solution to resolve the real problem would depend on how that component is developed – webextensions.org Jan 03 '13 at 20:49
  • The point of the question is that it's *not always obvious **where*** those pesky elements that aren't going with the flow *are*. Maybe the page is really long, maybe the elements are wider than they look... – SamB Apr 24 '19 at 19:02