Controls in collapsed 'FieldSet' control are not rendered correctly, if they have a parent 'Panel' control

  1. #1

    Controls in collapsed 'FieldSet' control are not rendered correctly, if they have a parent 'Panel' control

    <%@ 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">
    
    <%--
        Brief explanation of problem
        Controls in collapsed 'FieldSet' control are not rendered correctly, if they have a parent 'Panel' control
        For Example:
            - GridPanel in FieldSet -> missing bottom toolbar
            - ...
            - or this example
        // ---------------------------------------------
        -Form
            -Div
                -Panel
                    -FieldSet (collapsed=true)
                        -Panel
                            -Toolbar
                                -FileUpload Control -> width not correctly rendered
        // ---------------------------------------------
        -Form
            -Div
                -FieldSet (collapsed=true)
                    -Panel
                        -Toolbar
                            -FileUpload Control  -> OK
    --%>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title></title>
        <%--solves the problem with not correctly rendered 'browse' button in the toolbar (IE8, IE9) --%>
        <style type="text/css">
            .ext-ie .button-fix table.x-btn,
            .ext-gecko .button-fix table.x-btn{
                top:0px;           
            }
            .ext-ie .button-fix .x-form-text,
            .ext-gecko .button-fix .x-form-text{
                margin-top:1px;
            }
        </style>
    </head>
    <body>
        <form id="form2" runat="server">
            <ext:ResourceManager ID="ResourceManager1" runat="server">
            </ext:ResourceManager>
            <div>
            <ext:Panel runat="server" ID="panelMain">
                <Items>
                    <%--
                        If I set 'Collapsed="true" the width of the upload text field is not rendered correctly
                        The problem is the outer panel 'panelMain'
                        If I set 'Collapsed="false" or remove the outer panel 'panelMain' everything works fine.
    
                        I have removed unnecessary controls to analyze the problem.
    
                    --%>
                    <ext:FieldSet runat="server" ID="fieldSet" Collapsed="true" Collapsible="true" Title="Dummy text">
                        <Items>
                            <ext:Panel ID="Panel1" runat="server">
                                <Items>
                                    <%--...--%>
                                </Items>
                                <TopBar>
                                    <ext:Toolbar runat="server" ID="toolbar">
                                        <Items>
                                            <ext:FileUploadField ID="fileUploadField" runat="server" Icon="Attach" Width="500">
                                            </ext:FileUploadField>
                                            <%--...--%>
                                        </Items>
                                    </ext:Toolbar>
                                </TopBar>
                            </ext:Panel>
                        </Items>
                    </ext:FieldSet>
                    <%--...--%>
                </Items>
            </ext:Panel>
            </div>
        </form>
    </body>
    </html>
    Last edited by geoffrey.mcgill; Dec 05, 2011 at 2:14 PM. Reason: please use [CODE] tags
  2. #2
    Hi,

    Please set up HideMode="Offsets" for the FieldSet.

    More info about HideMode:
    http://forums.ext.net/showthread.php...ll=1#post69438
  3. #3
    Ok,
    thanks. It works for Mozilla, but not for IE7, IE8, IE9
    Any other suggestions?
  4. #4
    For me the following example doesn't work under IE7 only. Can you confirm?

    Example
    <%@ Page Language="C#" %>
    <%@ 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>Ext.NET Example</title>
    
        <style type="text/css">
            .ext-ie .x-form-file-btn {
                top: 0px;   
            }
        </style>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
    
            <ext:Panel runat="server">
                <Items>
                    <ext:FieldSet
                        runat="server" 
                        Title="Title"
                        Collapsed="true" 
                        Collapsible="true"
                        HideMode="Offsets">
                        <Items>
                            <ext:Panel runat="server">
                                <TopBar>
                                    <ext:Toolbar ID="Toolbar1" runat="server">
                                        <Items>
                                            <ext:FileUploadField runat="server" Icon="Attach" Width="500" />
                                        </Items>
                                    </ext:Toolbar>
                                </TopBar>
                            </ext:Panel>
                        </Items>
                    </ext:FieldSet>
                </Items>
            </ext:Panel>
        </form>
    </body>
    </html>
  5. #5
    Ok,
    you're right. You have used a different style than me.
    Mozilla, IE8, IE9 - ok
    IE7 - control FileUploadField complete missing
  6. #6
    To fix please repaint a FileUploadField's element just after expanding.

    Example
    <%@ Page Language="C#" %>
    <%@ 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>Ext.NET Example</title>
     
        <style type="text/css">
            .ext-ie .x-form-file-btn {
                top: 0px;   
            }
        </style>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
     
            <ext:Panel runat="server">
                <Items>
                    <ext:FieldSet
                        ID="FieldSet1"
                        runat="server"
                        Title="Title"
                        Collapsed="true"
                        Collapsible="true"
                        HideMode="Offsets">
                        <Items>
                            <ext:Panel runat="server">
                                <TopBar>
                                    <ext:Toolbar runat="server">
                                        <Items>
                                            <ext:FileUploadField 
                                                ID="FileUploadField1" 
                                                runat="server" 
                                                Icon="Attach" 
                                                Width="500" />
                                        </Items>
                                    </ext:Toolbar>
                                </TopBar>
                            </ext:Panel>
                        </Items>
                        <Listeners>
                            <Expand 
                                Handler="FileUploadField1.el.repaint();" 
                                Single="true" 
                                Delay="100" />
                        </Listeners>
                    </ext:FieldSet>
                </Items>
            </ext:Panel>
        </form>
    </body>
    </html>
  7. #7
    Ok, thank you. Now it works.

Similar Threads

  1. Replies: 2
    Last Post: Nov 15, 2012, 12:52 AM
  2. [CLOSED] dynamically added custom controls not rendered in fieldset
    By AnulekhaK in forum 1.x Legacy Premium Help
    Replies: 25
    Last Post: Feb 24, 2012, 2:58 PM
  3. Replies: 8
    Last Post: Jun 01, 2010, 3:01 PM
  4. Replies: 2
    Last Post: Apr 15, 2010, 5:33 AM
  5. Replies: 4
    Last Post: Feb 23, 2010, 7:38 AM

Tags for this Thread

Posting Permissions