CODEWITHSUNDEEP
javascriptjqueryhtmlcss
vinays84
vinays84

Reputation: 422

Zoom breaks Scrollable Datatable

I have a page that displays an interactive datatable with its Header and first two Columns (the buttons) fixed.

See it here.

The table consists of four parts (all having their own div)

  1. Buttons Header (div#buttonHeader)
    • Fixed vertically and horizontally
  2. Main Header (div#mainHeader)
    • Fixed vertically, Scrollable horizontally
  3. Buttons Body (div#buttonBody)
    • Scrollable vertically, Fixed horizontally
  4. Main Body (div#mainBody)
    • Scrollable vertically and horizontally

The problem is that zooming to different levels (110% on Chrome) on different browsers causes the body parts to render askew.

Is there a way to fix this without breaking the scrolling functionality?

Upvotes: -1

Views: 1160

Answers (1)

gtibrett
gtibrett

Reputation: 26

Had a chance to look at your code at a meetup. Found that #buttonheader was floating but #mainBody was unable to clear it due to a height being explicitly set.

Once we removed the height, page flow worked as expected. My hunch was that the height of 59px was being scaled to 110% or 64.9px which was then rounded and conflicting with the border box of #mainBody somehow.

Moral was... keep turning off styles in DevTools until you find the conflict, then find a different way to do what it was solving.

Upvotes: 1

Related Questions