PDA

View Full Version : [CLOSED] LoadMask Opacity



Patrick_G
Nov 28, 2012, 6:17 PM
Hello

I want to customize the opacity of the LoadMask so it completely hides what is behind it but the only thing I seem to have control over is the CSS of the area "between" the text box of the LoadMask and the big gray area outside the text box. This CSS will completely hide what is behind it, but the text box is positioned in the upper left.



.x-mask-loading {
opacity: 1;
height:inherit;
width: inherit;
}


Is there a way to completely hide what is behind the mask AND have the text box centered?

Thank you for your help.

Baidaly
Nov 29, 2012, 1:48 AM
Hello!

Try following example:


<%@ Page Language="C#" %>

<%@ Register assembly="Ext.Net" namespace="Ext.Net" tagprefix="ext" %>

<!DOCTYPE html>

<html>
<head runat="server">
<title>LoadMask during Page_Load - Ext.NET Examples</title>
<style>
.x-mask {
opacity: 1 !important;
background: none repeat scroll 0 0 #000 !important;
}
</style>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />

<h1>Configure LoadMask for AutoLoad</h1>

<p>Demonstrates how to configure a LoadMask to render while an external page is loading.</p>

<ext:Window
ID="Window1"
runat="server"
Width="500"
Height="470"
Title="Example">
<Loader
runat="server"
Url="http://www.ext.net/"
Mode="Frame">
<LoadMask ShowMask="true" Msg="Custom Loading Message..." />
</Loader>
<TopBar>
<ext:Toolbar runat="server">
<Items>
<ext:ToolbarFill />
<ext:Button runat="server" Text="Load Ext.NET forums" Icon="Application">
<Listeners>
<Click Handler="#{Window1}.load('http://forums.ext.net/');" />
</Listeners>
</ext:Button>

<ext:Button runat="server" Text="Refresh" Icon="ArrowRotateClockwise">
<Listeners>
<Click Handler="#{Window1}.reload();" />
</Listeners>
</ext:Button>
</Items>
</ext:Toolbar>
</TopBar>
</ext:Window>
</form>
</body>
</html>

As you see loading mask is absolutely black and hides everything behind. However, I think you have some problems with text box with text 'Loading'. Unfortunately, we couldn't reproduce this problem. If you will continue experiencing this problem, please, provide an example to reproduce.