search

optikalefx / OpenJS-Grid

OpenJS Grid is the easiest jQuery Grid ever. With very little work you can have a data grid that can do everything from sorting and searching to complex database queries. Best of all, its open source. So you can learn how it's all done.
http://square-bracket.com/openjs
MIT License
97 stars 48 forks source link

Table breaks when zooming out #57

Open Miqi180 opened 9 years ago

Miqi180 commented 9 years ago

Hi,

I made a small fix which prevents the grid structure from breaking when the window is zoomed out. Basically, what happens is that when you zoom out (i.e. press "Ctrl -") the initially calculated scrollbar size is then no longer valid and since there's no longer enough room for all the columns, the one to the far right is then automatically moved down by the browser. This happens not just on my site, but also on SB (at least in Firefox), and the issue is well-known, see for instance: http://stackoverflow.com/questions/10562502/page-structure-breaks-when-zooming-out

However, this is easily fixed by replacing the following line in the _equalize function

sbWidth = this.sbWidth,

with

sbWidth = this._calculateScrollbarWidth(),

By the way, do you think you'll find the time to make a fix for https://github.com/optikalefx/OpenJS-Grid/issues/53 anytime soon? :)

Best regards, Miqi180

optikalefx commented 9 years ago

Does this change result in any slowness? The idea was to cache the SBsize. maybe it should smarter and just re-do the cache when we detect a zoom?

optikalefx commented 9 years ago

I will get that fixed this week for you

Miqi180 commented 9 years ago

Yes, I thought about recaching on zoom, but this was the just the quickest fix I could think of and it doesn't seem to affect performance noticably, not even on my oldest laptop (4 years old). If you want to incorporate recaching on zoom, it should be pretty straightforward using the window resize event handler.

Looking forward to the single quote fix.

Thanks.

Miqi180 commented 9 years ago

Well, I just couldn't help myself, so here's my suggestion :)

grid.js: // grid resizer $grid._on("mousedown",".gridResizer", self._gridResize, self).on("click", ".gridResizer", function(){ self.sbWidth = self._calculateScrollbarWidth(); });

//window resize event handler: $(window).on("resize", function() { $(".gridWrapper").find(".gridResizer").click(); });

This actually triggers all the grids on the page, and that's exactly what we want. (Obviously, the _equalize function is exactly as before in this fix).

If you know a smarter way, please let me know.

Thanks.