[2.2/2.x svn] QuickTip horizontal scrollbar due to shadow

[MarkT]

A Quicktip on the right side of the screen will generate a horizontal scrollbar due to the fact that the calculation of its position doesn't take into account the drop shadow. It happens regardless of browser. I tested IE6, FF2, and Safari 3.1.

While it is not a proper fix, the following override will correct this by hard coding a -4px offset:

Ext.override(Ext.Tip, {
showAt : function(xy){
Ext.Tip.superclass.show.call(this);
if(this.measureWidth !== false && (!this.initialConfig || typeof this.initialConfig.width != 'number')){
this.doAutoWidth();
}
if(this.constrainPosition){
xy = this.el.adjustForConstraints(xy);
}
this.setPagePosition(xy[0] - 4, xy[1]);
}
});

Also, the Ext.Tip setting for shadow, which defaults to "sides", is ignored. It is always set to true by floating.


floating:{shadow:true,shim:true,useDisplay:true,constrain:false}

mark

[scottw]

I just ran into this same problem. Thank you for the fix.

To the Ext team: this is clearly an Ext bug that the shadow is not taken into account. Can this be fixed in a future release?

[mystix]

I just ran into this same problem. Thank you for the fix.

To the Ext team: this is clearly an Ext bug that the shadow is not taken into account. Can this be fixed in a future release?

quick check: are you seeing this in 2.2.1, or the latest 2.x branch from SVN?
(i ask so i can update the title accordingly)

[scottw]

I'm on Ext 2.2.1.

[mystix]

any chance you could retest this using the latest 2.x branch from SVN?
there've been a slew of fixes since 2.2.1 was officially released.

[scottw]

I just tested the 2.x branch from SVN and had the same problem.

I should also point out that the original post only mentioned a horizontal scrollbar, but I have a problem with vertical scrollbar as well. The item containing the qtip is in the lower right hand corner of the screen, so I get both scroll bars.

Thanks for taking an interest in this!

[scottw]

What do you guys think of this solution?


Ext.override(Ext.Element, {
// private
getConstrainToXY : function(){
var os = {top:0, left:0, bottom:0, right: 0};

return function(el, local, offsets, proposedXY){
el = Ext.get(el);
offsets = offsets ? Ext.applyIf(offsets, os) : os;

var vw, vh, vx = 0, vy = 0;
if(el.dom == document.body || el.dom == document){
vw = Ext.lib.Dom.getViewWidth();
vh = Ext.lib.Dom.getViewHeight();
}else{
vw = el.dom.clientWidth;
vh = el.dom.clientHeight;
if(!local){
var vxy = el.getXY();
vx = vxy[0];
vy = vxy[1];
}
}

var s = el.getScroll();

vx += offsets.left + s.left;
vy += offsets.top + s.top;

vw -= offsets.right;
vh -= offsets.bottom;

var vr = vx+vw;
var vb = vy+vh;

var xy = proposedXY || (!local ? this.getXY() : [this.getLeft(true), this.getTop(true)]);
var x = xy[0], y = xy[1];
var w = this.dom.offsetWidth, h = this.dom.offsetHeight;

// ADDED - width and height of shadow
var sw = 0, sh = 0;
if (this.shadow)
sw = sh = this.shadow.offset;

// only move it if it needs it
var moved = false;

// first validate right/bottom
if((x + w + sw) > vr){
x = vr - w - sw;
moved = true;
}
if((y + h + sh) > vb){
y = vb - h - sh;
moved = true;
}
// then make sure top/left isn't negative
if(x < vx){
x = vx;
moved = true;
}
if(y < vy){
y = vy;
moved = true;
}
return moved ? [x, y] : false;
};
}()
});

[pfederl]

I get a horizontal scrollbar in my browser for any quicktips appearing on the right edge of the browser. It looks like the x-shadow div's dimensions are still not taken into consideration when placing the tip. Fortunately MarkT's hack still works, but it would be nice if this was fixed.

Also, on a possibly related note, a similar issue can be seen with regular tips, for example in the demo found here:

http://www.sencha.com/deploy/dev/examples/simple-widgets/qtips.html

If you resize your browser so that it is exactly 462 pixels wide and then hover the mouse over the 'Ajax ToolTip' rectangle, the tip clearly goes beyond the browser's right edge, and thus generates a horizontal scrollbar. Is this a 'normal' behavior for Tips?