CODEWITHSUNDEEP
extjshtml-table
Rateltalk
Rateltalk

Reputation: 131

Ext.js 4.2 tabpanel header and body is misplaced when Browsers are zoomed

Not just zoomed, zoom in.

normal:
enter image description here

zoomed:
enter image description here

zoom in:
enter image description here

When there are many columns, he is very obvious. So is there any good hack?

Upvotes: 0

Views: 394

Answers (1)

Devendra Haldankar
Devendra Haldankar

Reputation: 432

Here's a link

I'm mentioning what this user said in sencha forum, and I agree with him on this:

This is a bug in Chrome that is reproducible outside the ExtJS framework.

If you load the following HTML code in your browser, the cells align neatly. If you use browser zoom, they don't.

The problem occurs when the cell width in pixels is floating point (non-int) after zooming. Chrome rounds the first-half cell widths down, and the last-half cell widths up.

E.g. if the calculated width is 24.3333px, the first two-third of columns is 24px, the last third of columns is 25px. So if we have 54 columns, at Column 36, we are off by 12 pixels, or half a column.

The ExtJS framework cannot do anything against this bug, unless Sencha knows a way to calculate the width AFTER zooming. I am not sure that it is possible to get the browser zoom level using javascript. However, I strongly believe that this is a problem the Chromium team has to fix.

I think there is still a workaround achievable through css. If you can, try using flex property to grid column in grid configuration. Calculate flex as = (given column width/sum of all column widths) and remove 'width' config at column level.

Flex actually sets width of each column in its CSS property after any layout change.

Upvotes: 1

Related Questions