Opened 10 years ago

Closed 7 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)

columns.jpg (22.3 KB) - added by Josh Trutwin 10 years ago.
grid columns not lined up - firefox 3 on Windows
columns_ie.jpg (23.9 KB) - added by Josh Trutwin 10 years ago.
Things are even worse in ie7
8714-evan.htm (2.1 KB) - added by Evan 7 years ago.
Test case having the same grid created by 2 HTML and JS ways
ie-7.png (38.5 KB) - added by Evan 7 years ago.
ie-8_9.png (37.2 KB) - added by Evan 7 years ago.

Download all attachments as: .zip

Change History (18)

Changed 10 years ago by Josh Trutwin

Attachment: columns.jpg added

grid columns not lined up - firefox 3 on Windows

Changed 10 years ago by Josh Trutwin

Attachment: columns_ie.jpg added

Things are even worse in ie7

comment:1 Changed 10 years ago by Josh Trutwin

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 10 years ago by Bryan Forbes

Milestone: tbdfuture

comment:3 Changed 10 years ago by Phil DeJarnett

(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 10 years ago by Phil DeJarnett

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 10 years ago by Phil DeJarnett

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 10 years ago by dtynan

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 10 years ago by Marcin Gołębski

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:8 Changed 10 years ago by godzillalad

I also see this and would like for it to be fixed

comment:9 Changed 8 years ago by evan

Milestone: future1.6
Resolution: wontfix
Status: newclosed

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 in reply to:  9 Changed 8 years ago by Matias Rask

Resolution: wontfix
Status: closedreopened

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 7 years ago by bill

Milestone: 1.6tbd
Owner: changed from Bryan Forbes to Evan
Status: reopenedassigned

Evan, looks like this ticket got lost, do you want to close it as wontfix again?

comment:12 Changed 7 years ago by Evan

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 7 years ago by Evan

Attachment: 8714-evan.htm added

Test case having the same grid created by 2 HTML and JS ways

Changed 7 years ago by Evan

Attachment: ie-7.png added

Changed 7 years ago by Evan

Attachment: ie-8_9.png added

comment:13 Changed 7 years ago by Evan

Milestone: tbd1.9
Resolution: wontfix
Status: assignedclosed

So closing as wontfix due to IE7 quirk

Note: See TracTickets for help on using tickets.