PDA

View Full Version : Using "ext:qtip" Scrollbar appears in IE



msuresh
1 Feb 2011, 1:10 AM
Hi,

I am using tooltip for an icon and textfield. Whenever user mouseover the icon the tooltip appears and the scroll bar appears on the main browser in IE, which is not expected behaviour.

24530

Is it possible to position the qtip?

My code looks like this:



tools:[{
id:'gear',
qtip: 'All Download',
handler: function(){
window.open(me.toolchestUrl);
}
}]

//For Text fields I am overriding like this
Ext.override(Ext.form.Field, {
afterRender : Ext.form.Field.prototype.afterRender.createSequence(function() {
var qt = me.qtip;
if (qt) {
Ext.QuickTips.register({
target : me.srchId,
title : '',
text : qt,
enabled : true,
showDelay : 20
});
}
})
});


Regards,
Suresh

Condor
1 Feb 2011, 1:32 AM
It's a bug in the tooltip positioning. It doesn't take the shadow into account.

Try:

Ext.QuickTip.prototype.shadow = false;
(before calling Ext.QuickTips.init)

msuresh
1 Feb 2011, 1:58 AM
Thanks Condor. In few browsers it works correctly and in few browsers the scrollbar appears.

For example in Mozilla Version 5.6.3 it works even without Ext.QuickTip.prototype.shadow = false;

However it fails in Mozilla Version 3.5.16, even when I include Ext.QuickTip.prototype.shadow = false;

Same problem in IE too... Any other work arounds?

Condor
1 Feb 2011, 2:03 AM
The proper solution would be to fix tooltip positioning, but that's a rather big task.

Does your document body actually need a scrollbar? Otherwise you could disable it.

msuresh
1 Feb 2011, 2:13 AM
We don't need scrollbars in document body.

I tried using



html, body {
overflow: hidden;
}


When I inspect the body it shows



element.style {
overflow: auto;
}


When I change it to overflow:hidden it works :)

I think I am missing somewhere something...

msuresh
1 Feb 2011, 2:23 AM
got it, this works



html, body {
overflow: hidden !important;
}

Condor
1 Feb 2011, 2:23 AM
element.style {overflow: auto} means the body style is explicitly set to overflow:auto.

Are you using an Ext.Viewport or is this a non-Ext page?

dotnetwise
23 Feb 2011, 12:15 AM
Still no real fix on the qucik tip computing positioning itself?
This is a pin in the ass as 60% of my extjs time is wasted time trying to figure out how to fix each and every standard extjs component's issue!

msuresh
24 Feb 2011, 9:33 PM
If it is a real issue then the development team need to look into this.

dotnetwise
25 Feb 2011, 12:22 AM
I have spent some time and this is a good work-around.
It's a shame the Ext team didn't properly test it nor included the scrollbar width into account


Ext.Tip.prototype.setPagePosition = Ext.Tip.prototype.setPagePosition.createInterceptor(function(x, y){

arguments.callee.caller.arguments[0] = Math.min(x,
document.body.offsetWidth - this.el.dom.offsetWidth - 20 //estimated scrollbar width
);
});