Member Avatar for daviddoria

This is my page with only the header row of the table:

When I start adding rows, everything looks good, until I add row 13. Here is an example:

You can see the header (the grey box) "wiggles" just a little bit. I thought there may have been an invalid character or something in the 13th row, but as a test I duplicated the 12th row and the wiggle still happens!

Surely this doesn't have anything to do with the number of rows, but can anyone see what else may be going wrong?

Thanks,

David

  • 2 Contributors
  • 4 Replies
  • 93 Views
  • 9 Hours Discussion Span
  • Latest Post Latest Post by daviddoria

Dani AI

Generated

Nice troubleshooting by and clear reproduction from — the slight shift happens because the layout width changes when the browser introduces a vertical scrollbar. Two practical, less intrusive ways to stop the header from "wiggling" are: reserve the scrollbar space with modern CSS, or detect and reserve that space with a small script for older browsers.

Modern CSS option (best when supported): reserve the gutter so the page width does not change when a scrollbar appears.

html {
  scrollbar-gutter: stable;
}

Documentation and compatibility notes are on MDN: MDN: scrollbar-gutter.

Fallback for older browsers: add/remove a layout class when the document height exceeds the viewport, and use that class to add a right padding or margin to the main wrapper. Example pattern:

(function(){
  var root = document.documentElement;
  function update(){
    if (root.scrollHeight > window.innerHeight) root.classList.add('has-vscroll');
    else root.classList.remove('has-vscroll');
  }
  window.addEventListener('resize', update);
  document.addEventListener('DOMContentLoaded', update);
})();

And in CSS target the wrapper when .has-vscroll is present to reserve ~16px (or compute actual scrollbar width if needed).

Notes and trade-offs: many macOS/mobile browsers use overlay scrollbars and never shift, so behavior varies by platform. Forcing a visible scrollbar everywhere can feel odd to users; prefer reserving the gutter or using a full-width/fixed header if the header must never move.

Recommended Answers

All 4 Replies

Member Avatar for shaya4207

If by "wiggles" you mean that it moves to the left, the reason is that when you get upto line 13 it becomes taller that the window, and a right scrollbar appears causing the page to move a drop to the left...

Member Avatar for daviddoria

Ohhhh, I see it now. Is there a way to force a page display the scroll bar even if it isn't long enough to need to scroll? It seems silly that if I click a link from one page that is short to go to a page that is long that the page would shift like this, doesn't it?

David

Member Avatar for shaya4207

Yeps, in your CSS put by the 'body' tag 'overflow: scroll', that's it...

If you want to just put a left scroll bar, or only bottom then do 'overflow-y: scroll' or 'overflow-x: scroll' respectively

Member Avatar for daviddoria

Perfect - thanks!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.