Opened 13 years ago
Closed 10 years ago
#8714 closed defect (wontfix)
dojox.grid,DataGrid column sizes do not line up with headers
Reported by: | Josh Trutwin | Owned by: | Evan |
---|---|---|---|
Priority: | high | Milestone: | 1.9 |
Component: | DojoX Grid | Version: | 1.3.0b1 |
Keywords: | grid columns unaligned | Cc: | |
Blocked By: | Blocking: |
Description
See attached image - created with the following grid tag:
<table dojoType="dojox.grid.DataGrid?"
class="grid" store="jsonStore" autoHeight="10" query="{ id: '*' }" rowsPerPage="20">
<thead>
<tr>
<th field="id" width="50px">Id</th> <th field="name" width="auto">Event Name</th> <th field="name" width="auto">Start Date</th> <th field="name" width="auto">Start Time</th> <th field="name" width="auto">Event Type</th>
</tr>
</thead>
</table>
Dojo 1.3 beta1
Attachments (5)
Change History (18)
Changed 13 years ago by
Attachment: | columns.jpg added |
---|
comment:1 Changed 13 years ago by
more info - the first image is what it looks like on immediate load on firefox 3. you can only resize the first column (Id) but once you do a resize all the lines line up nice.
The second image is what it looks like on load on ie7. You can however resize ALL the columns on ie7 though, strangely.
Josh
comment:2 Changed 13 years ago by
Milestone: | tbd → future |
---|
comment:3 Changed 13 years ago by
(I think this has been reported in the past, but this is the first issue I found searching.)
I'm having the same issue.
What appears to be happening is that when the grid is first loaded, it doesn't have a scrollbar. The scrollbar then appears, and it shifts the header row and all new rows, but not the rows already visible.
I think DataGrid? needs to force a resize whenever the scrollbar appears. How? I don't know. I tried adding a this.sizeChange() to _onFetchComplete, and it caused really bad flashing of the table if the table was scrolled.
One solution might be to only call the sizeChange() if the table has not been scrolled. This would allow it to fix the initial view, but not flash the table otherwise.
comment:4 Changed 13 years ago by
Update: just tried what I mentioned above, using a variety of tests. There are two issues: 1) If the list has been scrolled automatically, but then you scroll back up, the items are offset still. 2) The list still flashes really badly sometimes.
The bottom line is there needs to be some way to force the first page of columns to adjust their width if they are wider than the header. This is more complicated than I can get into on my own.
comment:5 Changed 13 years ago by
Update: This really is a problem for me, because important information keeps getting cut off. I figured out this work-around for now: I subclassed DataGrid?, and overrode _onFetchComplete like this:
dojo.declare("my.DataGrid", dojox.grid.DataGrid, { _onFetchComplete: function(items, req){ var firstLoad = !this._isLoaded this.inherited(arguments); if(firstLoad) { this.update(); } } });
This created an acceptable solution that doesn't flash too noticeably. I'm sure there is a more efficient way to resize the width only, but I couldn't figure out even how to resize anything otherwise. The only time I got an acceptable resize was using update(), or sizeChange() (but the delay caused a flicker).
This appears to fix the problem in both IE7 and FF3, and appears to have no adverse affect under IE8, FF2, Safari (Mac), Chrome, or Opera.
comment:6 Changed 13 years ago by
I have this problem all the time as well. It seems like the problem is worse when I add padding and/or margin to the grid's style, but I haven't looked closely at it in some time so I can't recall. I also did a similar workaround where I watch _onFetchComplete and then call refresh() on the grid or on it's parent perhaps (in some of the more complex border-layouts, I had to do this). Likewise, I often had to connect a resize event on global (the browser window), directly to a refresh() on the grid to get it to resize when the browser window resized. Some of this may already be fixed, so take with a grain of salt.
The other issue, mentioned in passing, is the flashing that one gets when you scroll down on the grid and then sort it in FF. I just tried all the browsers & FF is the only one that has a major problem with this. This deserves it's own defect (actually, it almost looks like a double-fetch, which I think I already saw a defect on).
Anyway, I'd like to put in a strong vote for fixing this .. while it can be worked around, it's fairly visible & annoying.
Thanks! Dylan Tynan
comment:7 Changed 13 years ago by
I found this problem too & I vote for fixing it (I would do it myslef, but I hanve no enough knowlede about this widget yet)
Regards, Marcin Gołębski
comment:9 follow-up: 10 Changed 11 years ago by
Milestone: | future → 1.6 |
---|---|
Resolution: | → wontfix |
Status: | new → closed |
This issue only occurs when creating Grid in HTML markup, it's caused by a IE quirk, see _Grid.js line 1341:
if(d.hasAttr(th, "width")){ cell.width = widthFromAttr(th); }
in IE, if we use <th width="auto">, d.hasAttr(th, "width") always return undefined, which results into this issue.
comment:10 Changed 11 years ago by
Resolution: | wontfix |
---|---|
Status: | closed → reopened |
Replying to evan:
This issue only occurs when creating Grid in HTML markup, it's caused by a IE quirk, see _Grid.js line 1341:
if(d.hasAttr(th, "width")){ cell.width = widthFromAttr(th); }in IE, if we use <th width="auto">, d.hasAttr(th, "width") always return undefined, which results into this issue.
Not true. I've got a programmatic created grid and the same problem exists. When width is set to auto the problem goes away but with fixed widths the problem arises.
comment:11 Changed 10 years ago by
Milestone: | 1.6 → tbd |
---|---|
Owner: | changed from Bryan Forbes to Evan |
Status: | reopened → assigned |
Evan, looks like this ticket got lost, do you want to close it as wontfix again?
comment:12 Changed 10 years ago by
Revisit this issue, still the same cause: in IE7, if we use <th width="auto">, d.hasAttr(th, "width") is false, which results into this issue.
Also uploading a test case with two grid, the same layout but created by HTML and JS way, in "ie-7.png" the JS way works well, but HTML way has the issue caused by the IE7 quirk. "ie-8_9.png" and all other browsers all works correctly.
Changed 10 years ago by
Attachment: | 8714-evan.htm added |
---|
Test case having the same grid created by 2 HTML and JS ways
Changed 10 years ago by
Changed 10 years ago by
Attachment: | ie-8_9.png added |
---|
comment:13 Changed 10 years ago by
Milestone: | tbd → 1.9 |
---|---|
Resolution: | → wontfix |
Status: | assigned → closed |
So closing as wontfix due to IE7 quirk
grid columns not lined up - firefox 3 on Windows