[Solved] Incorrect loading message positioning...

[wolverine4277]

Anybody knows why when i change from:


<div id="loading-mask" class="ext-el-mask"></div>
<div id="loading-msg" class="ext-el-mask-msg x-mask-loading">
<div>Loading...</div>
</div>

to:


<div id="mascara-de-precarga" class="ext-el-mask"></div>
<div id="mensaje-de-precarga" class="ext-el-mask-msg x-mask-loading">
<div>Cargando...</div>
</div>

in the .html file and change from:


var mask = Ext.get('loading-mask');
var msg = Ext.get('loading-msg');

to:


var mascaraDePrecarga = Ext.get('mascara-de-precarga');
var mensajeDePrecarga = Ext.get('mensaje-de-precarga');

in the .js file the loading message appears in the topleft corner and not in the middle of window? in fact, changing only from id 'loading-msg' to 'mensaje-de-precarga' results in the same behavior...
The use of other names for id's and variables is because i'm from Argentina and for the team is more simple understood the source code with names in our language...
Thanks.

[para]

Sounds like the style of the loading box is set in a CSS that uses the ID instead of a class....
Check to make sure it's not doing something like


#loading-msg {
css stuff
}


If you're using FireBug, click Inspect and then click on the element in question. It will show you the styles affecting it on the right (and where they are defined).
hope this helps...

[wolverine4277]

No luck with the search, i use firebug and also search in he ExtJs files for that ('loading-msg') and nothing...

[badgerd]

Try searching for the original class names - ext-el-mask, ext-el-mask-msg, x-mask-loading

[wolverine4277]

I made that search but i don't find none strange (i'm not css expert :">) in the css styles:


.ext-el-mask {
z-index: 20000;
position: absolute;
top: 0;
left: 0;
-moz-opacity: 0.5;
opacity: .50;
filter: alpha(opacity=50);
background-color: #CCC;
width: 100%;
height: 100%;
zoom: 1;
}
.ext-el-mask-msg {
z-index: 20001;
position: absolute;
top: 0;
left: 0;
border:1px solid #6593cf;
background: #c3daf9 url(../images/default/box/tb-blue.gif) repeat-x 0 -16px;
padding:2px;
}
.ext-el-mask-msg div {
padding:5px 10px 5px 10px;
background: #eee;
border:1px solid #a3bad9;
color:#333;
font:normal 12px tahoma, arial, helvetica, sans-serif;
cursor:wait;
}
.x-mask-loading div {
padding:5px 10px 5px 25px;
background: #eee url( '../images/default/grid/loading.gif' ) no-repeat 5px 5px;
line-height: 16px;
}