[CLOSED] Mask pushing componentes to the side

**SouthDeveloper** · Mar 28, 2012, 2:29 AM

Hello,

When I the mask is showing, it is pushing the components to the side, when it is hiding the scrollbar.

Now, it is really making my life hard, because it is disabling the htmleditors when this is happening.

Attached are the screenshots.

Url to test this out:
Stepts to reproduce:
1. Go to: http://www.passeagora.com.br/questoe...rsiva-manha/1/
2. Press 'Responder'

Old topic that this subjects was discussed: http://forums.ext.net/showthread.php...ot-positioning

THANKS

**Daniil** · Mar 28, 2012, 8:19 AM

Hi,

Originally Posted by SouthDeveloper

When I the mask is showing, it is pushing the components to the side, when it is hiding the scrollbar.

It appears to be reproducible with a vertical scrollbar only, right? I mean when there are both - vertical and horizontal - scrollbars, there is no pushing.

Can you confirm?

Also, please confirm that you are using the following suggestion.
http://forums.ext.net/showthread.php...ll=1#post68136

Originally Posted by SouthDeveloper

Now, it is really making my life hard, because it is disabling the htmleditors when this is happening.

I'm afraid I don't understand how it can disable the HtmlEditors. Please clarify. Is it reproducible with the online example?

**SouthDeveloper** · Mar 28, 2012, 11:45 AM

Good morning,

1. Yes, it is reproducible with the vertical scrollbar only;
2. Yes, I am using the suggestion;
3. Bellow is a simplified code to reproduce the problem.

Steps to reproduce the problem in the code bellow, using firefox:
1. Press Show Panel 1;
2. Press Show Panel 2;
3. Press Send;
4. Scroll to the bottom of the screen, there will be a htmleditor disabled because of the pushing.

Also, I found out if I remove the mask from the resource manager and use the mask from the button

(#{DirectMethods}.Test( { eventMask : { showMask : true } })")

, the pushing doesnt occur. Is the mask from the resource manager and the one from the button different?

THANKS

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

<script runat="server">
    [DirectMethod]
    public void Test()
    {

    }
</script>
<%@ Import Namespace="System.Collections.Generic" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Items Actions - Ext.NET Examples</title>
    <link href="../../../../resources/css/examples.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form runat="server">
    <ext:ResourceManager runat="server">
        <Listeners>
            <BeforeAjaxRequest Handler="Ext.getBody().addClass('x-mask-padding');
                                        /* Se desabilitada, esconde a máscara */
                                        if (!o.eventMask || o.eventMask.showMask !== false) { Ext.net.Mask.show(); }" />
            <AjaxRequestComplete Handler="Ext.getBody().removeClass('x-mask-padding'); Ext.net.Mask.hide();" />
            <AjaxRequestException Handler="Ext.getBody().removeClass('x-mask-padding'); Ext.net.Mask.hide();" />
        </Listeners>
    </ext:ResourceManager>
    <div style="width: 800px; margin: 0 auto">
        <ext:Button runat="server" Text="Show Panel 1" OnClientClick="#{Panel1}.show();" />
        <ext:Button runat="server" Text="Show Panel 2" OnClientClick="#{Panel2}.show();" />
        <ext:Panel ID="Panel1" Hidden="true" Layout="FitLayout" runat="server">
            <Items>
                <ext:HtmlEditor runat="server" />
            </Items>
        </ext:Panel>
        <ext:Button Text="Send" OnClientClick="#{DirectMethods}.Test()" runat="server" />
        <ext:Panel Title="Name" Html="Name" Height="400" runat="server" />
        <ext:Panel Title="Name" Html="Name" Height="400" runat="server" />
        <ext:Panel Title="Name" Html="Name" Height="400" runat="server" />
        <ext:Panel Title="Name" Html="Name" Height="400" runat="server" />
        <ext:Panel Title="Name" Html="Name" Height="400" runat="server" />
        <ext:Panel Title="Name" Html="Name" Height="400" runat="server" />
        <ext:Panel Title="Name" Html="Name" Height="400" runat="server" />
        <ext:Panel Title="Name" Html="Name" Height="200" runat="server" />
        <ext:Panel Html="Name" Height="100" runat="server" />
        <ext:Panel ID="Panel2" Hidden="true" Layout="FitLayout" runat="server">
            <Items>
                <ext:HtmlEditor runat="server" />
            </Items>
        </ext:Panel>
    </div>
    </form>
</body>
</html>

**Daniil** · Mar 28, 2012, 12:48 PM

Originally Posted by SouthDeveloper

Also, I found out if I remove the mask from the resource manager and use the mask from the button

(#{DirectMethods}.Test( { eventMask : { showMask : true } })")

, the pushing doesnt occur. Is the mask from the resource manager and the one from the button different?

Yes, that's right.

Regarding to pushing.

I can't see

<style type="text/css">
    .x-mask-padding {
        padding-right: 17px;
    }
</style>

in your example.

It fixes pushing.

Regarding to disabling HtmEditor after calling the DirectMethod.

1. It appears to be not related to pushing.

2. I was able to reproduce it in FireFox only, it's ok in IE and Chrome. Can you confirm?

**SouthDeveloper** · Mar 28, 2012, 10:47 PM

THANKS. Mask is now fixed.

BUT, we have a problem with htmleditor.

It is like you said, it only happens in ff, and it is not related to the mask.

Can you, please, have a look at it?

**Daniil** · Mar 29, 2012, 10:24 AM

Strange issue, I was able to reproduce it with the following example. Again - only FireFox.

If comment the HtmlEditor1, then all is ok.

We are investigating. It looks a bug in FireFox.

Example

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Ext.NET Example</title>
</head>
<body>
    <ext:ResourceManager runat="server" />

    <ext:Button runat="server" Text="Show HtmlEditor" OnClientClick="HtmlEditor2.show();" />

    <ext:HtmlEditor ID="HtmlEditor1" runat="server" Hidden="true" />
    
    <ext:HtmlEditor ID="HtmlEditor2" runat="server" Hidden="true" />
</body>
</html>

**Daniil** · Mar 29, 2012, 12:08 PM

Just a note - an issue is not reproducible in FireFox 10.0.2, but reproducible in FireFox 11.0. So, I think, it's rather a FireFox bug.

As a workaround we can suggest the following:

1. Set up

ID="HtmlEditor2"

for the problem HtmlEditor.

2. Use

<AjaxRequestComplete Handler="Ext.getBody().removeClass('x-mask-padding'); 
                              Ext.net.Mask.hide(); 
                              if (Panel2.isVisible()) { 
                                  HtmlEditor2.tb.getComponent('sourceedit').xtbHidden = true; 
                                  HtmlEditor2.toggleSourceEdit(true);
                                  HtmlEditor2.toggleSourceEdit(false);
                              }" />

One problem - it causes the HtmlEditor to be focused.

I think it might be fixed in the next FireFox release.

**SouthDeveloper** · Apr 15, 2012, 1:26 PM

Hi again!

I got many of the pushing cases solved, but I still have some left :(

Steps to reproduce:

1. Using firefox or ie;
2. Go to http://www.passeagora.com.br/concursos/pesquisar/ ;
3. Choose any item in the Região dropdown field;
4. Mask will push the screen.

Thanks

**Daniil** · Apr 16, 2012, 10:10 AM

Hi,

Reproduced.

1. FireFox + no vertical scrolling => pushing.

2. IE + vertical scrolling => pushing.

Can you confirm?

Please try:

<BeforeAjaxRequest Handler="var html = document.getElementsByTagName('html')[0];
                                hasVScroll = html.clientHeight < html.scrollHeight;

                            if (!((Ext.isGecko && !hasVScroll) ||
                                (Ext.isIE && hasVScroll))) {
                                            
                                Ext.getBody().addClass('x-mask-padding');
                            }
                                        
                            if (!o.eventMask || o.eventMask.showMask !== false) { 
                                Ext.net.Mask.show(); 
                            }" />

If the issue persists, please provide a sample to reproduce.

**SouthDeveloper** · Apr 17, 2012, 12:08 AM

Hi

Solved for me again!

Thanks

Thread: [CLOSED] Mask pushing componentes to the side

Thread Tools

Search Thread

Display

[CLOSED] Mask pushing componentes to the side

Similar Threads

[CLOSED] Store to be client-side or server-side paginated upon the checkbox change

[CLOSED] How to display 2 controls side by side (on the same line)

[CLOSED] Adding Items to Store Client-side, want to retrieve server side

Mask to handle large server side process

[CLOSED] Example of dynamic window with form from Client Side, created on Server Side

Posting Permissions

Sitemap

Downloads

Resources

Thread: [CLOSED] Mask pushing componentes to the side

[CLOSED] Mask pushing componentes to the side

Similar Threads

Posting Permissions

Sitemap

Downloads

Resources

Stay connected with us