PDA

View Full Version : [FIXED-453][3.??] QTips are shown behind loadMasks



watrboy00
19 Jan 2010, 9:29 AM
Ext version tested:

Ext 3.1.1-beta


Adapter used:

ext


css used:

only default ext-all.css



Browser versions tested against:

Doesn't appear to be browser specific


Operating System:

Doesn't appear to be OS specific


Description:

QTips are displayed behind LoasMask messages.


Test Case:


<html>
<head>
<title>Test Case</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function() {
Ext.QuickTips.init();

Ext.apply( Ext.QuickTips.getQuickTip() , {
dismissDelay: 0,
hideDelay: 150,
interceptTitles: true,
maxWidth: 500,
showDelay: 75,
trackMouse: false
});

var vp = new Ext.Viewport({
items: [{
html: '',
listeners: {
'afterrender' : {
delay: 1000,
fn: function( c ) {
var lm = new Ext.LoadMask( c.body , {} );

lm.show();
}
}
},
ref: '../center',
region: 'center'
}, {
html: '<span title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus consectetur rutrum quam, eu euismod eros gravida at. In risus felis, commodo non rhoncus ac, cursus in urna. Nullam nulla purus, tristique vitae pulvinar ut, sagittis porta eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean id sapien lacus. Integer volutpat massa vitae lectus pellentesque adipiscing. Vestibulum sit amet mi imperdiet sem sodales cursus. Nunc suscipit volutpat malesuada. Nunc quis mi eros. Morbi turpis nisi, condimentum in ultrices in, fringilla ut purus. Aliquam congue hendrerit hendrerit. Quisque et elit id nisi accumsan tincidunt in eu quam. Nunc a libero quis ipsum convallis porttitor. Suspendisse non eros metus. Donec accumsan vestibulum est, vitae molestie quam consectetur at. Aliquam euismod suscipit lacus eu fringilla. Aliquam at velit nulla. Maecenas pulvinar, elit sit amet bibendum placerat, diam ligula molestie erat, quis aliquam arcu nisi hendrerit ante. Integer justo orci, vestibulum ut dignissim feugiat, egestas et lacus. Praesent non elit est. Donec aliquam scelerisque mollis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus a arcu non mi tincidunt scelerisque sed ut augue. Integer ut purus felis, in aliquam nibh. Aliquam feugiat rutrum scelerisque. Nullam id lorem vel ante ultricies sollicitudin sed vitae turpis. Aenean consectetur, quam aliquam consequat pulvinar, lectus velit eleifend neque, sed volutpat lectus libero luctus felis. Nullam vel enim ut eros malesuada convallis. Vivamus auctor luctus elit, sed rutrum purus venenatis at. Vivamus at nibh enim. Donec fringilla leo sed tellus tempor et sollicitudin nisi ullamcorper. Donec sollicitudin, metus a dictum pellentesque, enim odio sagittis nisi, ac fermentum tortor purus ac ante. Suspendisse blandit diam eget felis ornare condimentum. Sed semper consectetur vestibulum. Suspendisse consequat dapibus sapien, ac tincidunt risus convallis ut. Sed cursus ultricies adipiscing. Sed arcu dui, consectetur nec gravida vel, placerat at ante. Nunc neque magna, hendrerit a molestie vitae, pharetra vitae libero. Nulla id tempus tellus. Nam suscipit posuere urna, non tempor massa sodales fermentum. Aliquam vel porta urna. Phasellus lobortis adipiscing ultricies. Pellentesque hendrerit tortor quis lacus gravida ut dictum arcu eleifend. Aenean condimentum volutpat leo, eget interdum urna ullamcorper vel. In eget facilisis elit. Maecenas neque nisi, porttitor sed feugiat eget, ultrices ut tortor. Curabitur suscipit dignissim tellus, ac varius orci consectetur in. Nunc leo purus, mollis nec pharetra accumsan, rhoncus sit amet tellus. In laoreet tristique diam, at feugiat est faucibus quis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dignissim mi in odio luctus posuere tempor nisl placerat. Curabitur eget pharetra massa. Nunc fringilla ultricies leo quis suscipit. Quisque vulputate, tortor eget dictum porttitor, ipsum libero interdum diam, at interdum augue nisi ac orci. Sed sed leo elit. Curabitur pulvinar, mi non elementum tincidunt, diam velit convallis enim, id commodo turpis purus eget purus. Donec mattis, dui a iaculis hendrerit, ante arcu tincidunt eros, consectetur congue nulla ligula commodo elit. Sed quis turpis velit. Suspendisse interdum dui id mi ornare sed pharetra diam luctus. Vestibulum eu neque mi. Donec sed diam sit amet leo pretium blandit. Proin turpis neque, sagittis sed euismod et, blandit ultrices lacus. Mauris a tortor ligula, non eleifend augue. Integer non nisi id metus pharetra consequat auctor elementum ipsum. Vestibulum quis mauris ac lectus euismod molestie. Nulla quis sem lorem. Pellentesque ultrices, arcu in tristique mollis, purus mauris tempor nunc, a vehicula nunc urna a magna. Proin a lacus in neque auctor viverra. Donec congue sodales nibh, vel hendrerit lorem malesuada id. Praesent at ante ut nisi elementum iaculis. Nunc velit nisi, mollis sed auctor vitae, congue nec sapien. Nullam bibendum auctor aliquam. Quisque eu mi odio, non dictum libero. Nam laoreet pellentesque augue vitae fringilla.">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus consectetur rutrum quam, eu euismod eros gravida at. In risus felis, commodo non rhoncus ac, cursus in urna. Nullam nulla purus, tristique vitae pulvinar ut, sagittis porta eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean id sapien lacus. Integer volutpat massa vitae lectus pellentesque adipiscing. Vestibulum sit amet mi imperdiet sem sodales cursus. Nunc suscipit volutpat malesuada. Nunc quis mi eros. Morbi turpis nisi, condimentum in ultrices in, fringilla ut purus. Aliquam congue hendrerit hendrerit. Quisque et elit id nisi accumsan tincidunt in eu quam. Nunc a libero quis ipsum convallis porttitor. Suspendisse non eros metus. Donec accumsan vestibulum est, vitae molestie quam consectetur at. Aliquam euismod suscipit lacus eu fringilla. Aliquam at velit nulla. Maecenas pulvinar, elit sit amet bibendum placerat, diam ligula molestie erat, quis aliquam arcu nisi hendrerit ante. Integer justo orci, vestibulum ut dignissim feugiat, egestas et lacus. Praesent non elit est. Donec aliquam scelerisque mollis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus a arcu non mi tincidunt scelerisque sed ut augue. Integer ut purus felis, in aliquam nibh. Aliquam feugiat rutrum scelerisque. Nullam id lorem vel ante ultricies sollicitudin sed vitae turpis. Aenean consectetur, quam aliquam consequat pulvinar, lectus velit eleifend neque, sed volutpat lectus libero luctus felis. Nullam vel enim ut eros malesuada convallis. Vivamus auctor luctus elit, sed rutrum purus venenatis at. Vivamus at nibh enim. Donec fringilla leo sed tellus tempor et sollicitudin nisi ullamcorper. Donec sollicitudin, metus a dictum pellentesque, enim odio sagittis nisi, ac fermentum tortor purus ac ante. Suspendisse blandit diam eget felis ornare condimentum. Sed semper consectetur vestibulum. Suspendisse consequat dapibus sapien, ac tincidunt risus convallis ut. Sed cursus ultricies adipiscing. Sed arcu dui, consectetur nec gravida vel, placerat at ante. Nunc neque magna, hendrerit a molestie vitae, pharetra vitae libero. Nulla id tempus tellus. Nam suscipit posuere urna, non tempor massa sodales fermentum. Aliquam vel porta urna. Phasellus lobortis adipiscing ultricies. Pellentesque hendrerit tortor quis lacus gravida ut dictum arcu eleifend. Aenean condimentum volutpat leo, eget interdum urna ullamcorper vel. In eget facilisis elit. Maecenas neque nisi, porttitor sed feugiat eget, ultrices ut tortor. Curabitur suscipit dignissim tellus, ac varius orci consectetur in. Nunc leo purus, mollis nec pharetra accumsan, rhoncus sit amet tellus. In laoreet tristique diam, at feugiat est faucibus quis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dignissim mi in odio luctus posuere tempor nisl placerat. Curabitur eget pharetra massa. Nunc fringilla ultricies leo quis suscipit. Quisque vulputate, tortor eget dictum porttitor, ipsum libero interdum diam, at interdum augue nisi ac orci. Sed sed leo elit. Curabitur pulvinar, mi non elementum tincidunt, diam velit convallis enim, id commodo turpis purus eget purus. Donec mattis, dui a iaculis hendrerit, ante arcu tincidunt eros, consectetur congue nulla ligula commodo elit. Sed quis turpis velit. Suspendisse interdum dui id mi ornare sed pharetra diam luctus. Vestibulum eu neque mi. Donec sed diam sit amet leo pretium blandit. Proin turpis neque, sagittis sed euismod et, blandit ultrices lacus. Mauris a tortor ligula, non eleifend augue. Integer non nisi id metus pharetra consequat auctor elementum ipsum. Vestibulum quis mauris ac lectus euismod molestie. Nulla quis sem lorem. Pellentesque ultrices, arcu in tristique mollis, purus mauris tempor nunc, a vehicula nunc urna a magna. Proin a lacus in neque auctor viverra. Donec congue sodales nibh, vel hendrerit lorem malesuada id. Praesent at ante ut nisi elementum iaculis. Nunc velit nisi, mollis sed auctor vitae, congue nec sapien. Nullam bibendum auctor aliquam. Quisque eu mi odio, non dictum libero. Nam laoreet pellentesque augue vitae fringilla.</span>',
region: 'west',
width: 400
}],
layout: 'border'
});
});
</script>
</head>
<body></body>
</html>


Steps to reproduce the problem:

Hover over the text in the west region and it will display the qtip behind the load mask message.


The result that was expected:

QTips should be displayed over all other items.


The result that occurs instead:

Shows behind others


Screenshot or Video:

see attached screenshot


Possible fix:
Most z-index values used throughout ExtJS are 20000-20001. Resizeable seems to be the only component that uses a larger value (500000). QTips should be 20002 or maybe 500001?

resources\css\structure\qtips.css


.x-tip{
border:0 none;
left:0;
position: absolute;
top: 0;
visibility: hidden;
z-index: 20002;
}

Jamie Avins
19 Jan 2010, 10:27 AM
Long standing issue, not specific to 3.1.1 beta. I'll see if it can make it into 3.1.1.

jayrobinson
19 Jan 2010, 6:20 PM
Fixed. Thank you.