#258 new

position:relative bug with tablerows in Gecko

Reported by Stefan | November 8th, 2009 @ 01:22 PM

Hallo. First of all I want to say, that this is not a bug in the script.aculo.us framework, but rather a bug in Gecko that gets "activated" by script.aculo.us.

If you define a table, set the border and border:collapse and define a background of the tablerow, and then set the tablerow to position:relative, the borders of your tablerow will magically disappear.
That's the bug in Gecko. (see testcase here: http://forums.mozillazine.org/viewtopic.php?f=38&t=1577645)

So if I want to define a tablerow as draggable through script.aculo.us framework, a tablerow automatically gets positioned relatively.
This is unnecessary if I define the use of a ghosting draggable. So in Draggable.initalize you currently have this code:
=== snip ===

if(options.scroll && !options.scroll.scrollTo && !options.scroll.outerHTML) {
  options.scroll = $(options.scroll);
  this._isScrollChild = Element.childOf(this.element, options.scroll);

Element.makePositioned(this.element); // fix IE

this.options  = options;
this.dragging = false;

=== snap ===

So for fixing this bug I extended the makePositioned-Line:
=== snip ===

    // Don't make <tr>s positioned in Gecko if you don't need it, because Gecko doesn't display (collapsed) border on relatively positioned table rows with background
    if (!(Prototype.Browser.Gecko && options.ghosting && this.element.nodeName == 'TR')) {
        Element.makePositioned(this.element); // fix IE

=== snap ===

So the border in draggables with tablerows and background now works in Gecko.

There is only one issue left: If I drag and let go more elements, the border will still disappear - maybe this can be fixed, too.

No comments found

Please Sign in or create a free account to add a new ticket.

With your very own profile, you can contribute to projects, track your activity, watch tickets, receive and update tickets through your email and much more.

New-ticket Create new ticket

Create your profile

Help contribute to this project by taking a few moments to create your personal profile. Create your profile ยป

script.aculo.us is an open-source JavaScript framework for visual effects and interface behaviours.
<br/><b>Source available from github</b>
The Git repository resides at:
<a href="http://github.com/madrobby/scriptaculous">http://github.com/madrobby/scriptaculous</a>
<br/>Check out the current development trunk with:
<code>git clone git://github.com/madrobby/scriptaculous.git</code>
<br/>As <b>script.aculo.us 1.xx is feature-frozen</b>, this development trunk is for <b>bugfixes only</b>.
<br/>New development should happen only for
<b>script.aculo.us 2</b>.
<br/><b>Creating a bug report</b>
When creating a bug report, be sure to include as much relevant information as possible. Post a an example that shows off the problem. Preferably, <b>alter the unit tests</b> and show through either changed or added tests how the expected behavior is not occuring.

People watching this ticket