Skip to main content

Find Unintended CSS Overflow

You can only find truth with logic if you have already found truth without it.
— Gilbert Keith Chesterton.

Hey guys, ever coded an HTML static design site? I’m sure you’ve encountered problems where you’ve just installed some CSS framework then coded some additional CSS files. After you’ve finished the code you run it on a browser then TADAHHH!

There were overflows horizontal and vertical scrollbars. 😁

It’s a bit cumbersome to find where those scrollbar or overflow originated, so that’s what this article is for. In order to find those overflows, here’s a one liner that you can directly paste on your web developer console or just press F12 then the console tab. The console tab is the place where you look at javascript logs (console.log), anyways just copy this then analyze it first before pasting on your console.

javascript:void(function () {var docWidth = document.documentElement.offsetWidth;[].forEach.call(document.querySelectorAll('*'), function (el) {if (el.offsetWidth > docWidth) console.log(el)})})();

Here is the full script which had been beautified for readability:

var docWidth =  document.documentElement.offsetWidth;
[].forEach.call(document.querySelectorAll("*"), function(el) {
  if (el.offsetWidth > docWidth) {
    console.log(el);
  }
});

If you analyze carefully the code, you’ll see that on the first instruction it gets the current document offset width. Then it loops on all selector which are class and id’s, if it found an offending or greater than the offset width it will print that element attributes and location.

That’s all guys!

Let me know in the comments if you have questions or queries, you can also DM me directly.

Also follow me for similar article, tips, and tricks ❤.

Comments

Popular posts from this blog

Disable mDNS and SSDP Discovery in Google Chrome

We're born alone, we live alone, we die alone. Only through our love and friendship can we create the illusion for the moment that we're not alone. — Orson Welles.

Top Three DNS Providers That Provides Good Service in SEA (Southeast Asia)

If you give a hacker a new toy, the first thing he'll do is take it apart to figure out how it works. — Jamie Zawinski.

Gimp Automating Image Processing with Python Fu

What a large volume of adventures may be grasped within the span of his little life by him who interests his heart in everything. — Laurence Sterne.

Flutter Series - Custom Icons

Everyone thinks of changing the world, but no one thinks of changing himself. — Leo Tolstoy.