Opened 13 years ago

Closed 13 years ago

Last modified 12 years ago

#1245 closed defect (fixed)

docIcon has 3px gap in IE

Reported by: ornus Owned by: ilia
Priority: high Milestone:
Component: General Version: 0.3
Keywords: tree docIcon Cc:
Blocked By: Blocking:

Description

There's a gap in IE between icons that breaks the grid. It is caused by the floated TreeExpand? div.

http://www.positioniseverything.net/explorer/threepxtest.html describes the problem.

Attachments (7)

treeV3_11.patch (360 bytes) - added by ornus 13 years ago.
Fix through position: relative
treeV3_11.2.patch (439 bytes) - added by ornus 13 years ago.
Alternative patch.
treeV3_11.3.patch (446 bytes) - added by ornus 13 years ago.
Working patch.
treeV3_11.4.patch (837 bytes) - added by ornus 13 years ago.
patch
treeV3_11.5.patch (2.1 KB) - added by ornus 13 years ago.
Alternative patch that uses different layout.
treeV3_11.6.patch (2.3 KB) - added by ornus 13 years ago.
Updated patch.
treeV3_11.7.patch (3.4 KB) - added by ornus 13 years ago.
Refactored and cleaned up code and css.

Download all attachments as: .zip

Change History (15)

Changed 13 years ago by ornus

Attachment: treeV3_11.patch added

Fix through position: relative

comment:1 Changed 13 years ago by ornus

This patch works on the first sight, but I don't like it. Changing position mode can have unforeseen side effects, slow downs in calculating position in dnd, slow down with big tree, layout complications, etc. I don't know if there will be any problems, but I really would prefer to have a different solution.

Changed 13 years ago by ornus

Attachment: treeV3_11.2.patch added

Alternative patch.

comment:2 Changed 13 years ago by ornus

This patch assumes there's a 3px gap and compensates by making expand picture smaller. There's still a horizontal gap, but vertical grid is alligned.

The best solution would be to use

margin-left: -3px;

but for whatever reason it doesn't work.

comment:3 Changed 13 years ago by ornus

Maybe it's better not to have vertical line for multi-line nodes? It's not a big deal.

I guess the best solution would be to allew user to specify if he wants vertical line at price of gaps? But that's too much extra work.

Changed 13 years ago by ornus

Attachment: treeV3_11.3.patch added

Working patch.

comment:4 Changed 13 years ago by ornus

Last patch removes the gap by setting

margin-right: -3px;

on the floated TreeExpanded? icon. It seems to work the best.

Changed 13 years ago by ornus

Attachment: treeV3_11.4.patch added

patch

Changed 13 years ago by ornus

Attachment: treeV3_11.5.patch added

Alternative patch that uses different layout.

comment:5 Changed 13 years ago by ornus

The last patch changes layout slightly. It adds a div around all icons and content, next to the container:

<div class="TreeContentWrapper">
   <div class="TreeExpand></div><div class="TreeIconContent"><TreeIcon><TreeContent></div>
</div>
<div class="TreeContainer">
</div>

This let's us set height: 18px on the TreeContentWrapper?. The gap is between floated div and a div with height: 18px, but all floatet images are inside - no gap.

There are +s and -s. Expand all operation is about 25% faster than when using margin-right: -3px. Probably IE has less to recalc. YAY!

On the negative side Empty Folder now has a bug. See docIcon1.html. The bug will only show itself when empty folder is next to the last. It's minor, ehh. I'll take tree being faster than fix for this bug:)

comment:6 Changed 13 years ago by ornus

It's probably a good idea to clean HTML somewhat. There are too many divs. Not sure we need all of them.

Changed 13 years ago by ornus

Attachment: treeV3_11.6.patch added

Updated patch.

Changed 13 years ago by ornus

Attachment: treeV3_11.7.patch added

Refactored and cleaned up code and css.

comment:7 Changed 13 years ago by guest

Resolution: fixed
Status: newclosed

comment:8 Changed 12 years ago by (none)

Milestone: 0.4

Milestone 0.4 deleted

Note: See TracTickets for help on using tickets.