[OPEN] ComboBox Rendering issue

  1. #1

    [OPEN] ComboBox Rendering issue

    Hello,

    You will notice with the example below that the ComboBox in the 2nd panel of the accordion will not render properly; if you run the 2nd example you will notice it renders perfectly fine:

    Example1.aspx: (Broken)
    <%@ Page Language="C#" %>
    <%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <script runat="server">
    
    </script>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title>Example</title>
    </head>
    <body>
        <form id="form1" runat="server">
            <asp:ScriptManager runat="server" EnablePartialRendering="True" />
            <ext:ScriptManager runat="server" StateProvider="PostBack" />
            <ext:Panel runat="server" Border="False">
                <Content>
                    <ext:Accordion ID="Accordion" runat="server" Animate="True" Sequence="True" TitleCollapse="False">
                        <ext:Panel ID="Panel1" runat="server" AutoScroll="True" AutoHeight="True" Title="Content 1">
                            <Content>
                                Content 1
                            </Content>
                        </ext:Panel>
                        <ext:Panel ID="Panel2" runat="server" AutoScroll="True" AutoHeight="True" Title="Content 2">
                            <Content>
                                <ext:TextField ID="TextField1" runat="server" Width="255" />
                                <ext:ComboBox ID="ComboBox1"
                                    runat="server"
                                    Width="255">
                                    <Items>
                                        <ext:ListItem Text="Item 1" Value="Item 1" />
                                    </Items>
                                </ext:ComboBox>
                            </Content>
                        </ext:Panel>
                    </ext:Accordion>
                </Content>
            </ext:Panel>
        </form>
    </body>
    </html>
    Example2.aspx: (Works)
    <%@ Page Language="C#" %>
    <%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <script runat="server">
    
    </script>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title>Example</title>
    </head>
    <body>
        <form id="form1" runat="server">
            <asp:ScriptManager runat="server" EnablePartialRendering="True" />
            <ext:ScriptManager runat="server" StateProvider="PostBack" />
            <ext:Panel runat="server" Border="False">
                <Content>
                    <ext:Accordion ID="Accordion" runat="server" Animate="True" Sequence="True" TitleCollapse="False">
                        <ext:Panel ID="Panel2" runat="server" AutoScroll="True" AutoHeight="True" Title="Content 2">
                            <Content>
                                <ext:TextField ID="TextField1" runat="server" Width="255" />
                                <ext:ComboBox ID="ComboBox1"
                                    runat="server"
                                    Width="255">
                                    <Items>
                                        <ext:ListItem Text="Item 1" Value="Item 1" />
                                    </Items>
                                </ext:ComboBox>
                            </Content>
                        </ext:Panel>
                        <ext:Panel ID="Panel1" runat="server" AutoScroll="True" AutoHeight="True" Title="Content 1">
                            <Content>
                                Content 1
                            </Content>
                        </ext:Panel>
                    </ext:Accordion>
                </Content>
            </ext:Panel>
        </form>
    </body>
    </html>
    The examples were tested in IE6 and FF3.0.

    The examples just switch the rendering order of the panels. Would be awesome if this can be fixed, it's showing a lot in our current solution :)

    Cheers,
    Timothy
  2. #2

    RE: [OPEN] ComboBox Rendering issue

    Hi Timothy,

    please add this listener to second accordion panel (which contains combo)

                            <Listeners>
                                <Expand Handler="#{ComboBox1}.syncSize();" Single="true" />
                            </Listeners>
    Please let me know if this doesn't work for you


  3. #3

    RE: [OPEN] ComboBox Rendering issue

    Thanks vlad, but the example I gave you is a simplified version of what we are doing.

    The ComboBox is actually loaded in as part of a dynamically loaded user control applied to the 2nd panel of the Accordion, so I can't add listeners to resync the size :)

    Cheers,
    Timothy
  4. #4

    RE: [OPEN] ComboBox Rendering issue

    Can you post this example?

    I don't see any difficulties to set Listener in code-behind (in code-behind you can always to know ClientID of combo in user control and set listener)


  5. #5

    RE: [OPEN] ComboBox Rendering issue

    Example.aspx:
    <%@ Page Language="C#" %>
    <%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <script runat="server">
        protected override void OnInit(EventArgs e)
        {
            Control control = Page.LoadControl("Example-Control.ascx");
    
            UserControl.Controls.Add(control);
            
            base.OnInit(e);
        }
    </script>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title>Example</title>
    </head>
    <body>
        <form id="form1" runat="server">
            <asp:ScriptManager runat="server" EnablePartialRendering="True" />
            <ext:ScriptManager runat="server" StateProvider="PostBack" />
            <ext:Panel runat="server" Border="False">
                <Content>
                    <ext:Accordion ID="Accordion" runat="server" Animate="True" Sequence="True" TitleCollapse="False">
                        <ext:Panel ID="Panel1" runat="server" AutoScroll="True" AutoHeight="True" Title="Content 1">
                            <Content>
                                Content 1
                            </Content>
                        </ext:Panel>
                        <ext:Panel ID="Panel2" runat="server" AutoScroll="True" AutoHeight="True" Title="Content 2">
                            <Content>
                                <asp:PlaceHolder ID="UserControl" runat="server" />
                            </Content>
                        </ext:Panel>
                    </ext:Accordion>
                </Content>
            </ext:Panel>
        </form>
    </body>
    </html>
    Example-Control.ascx:
    <%@ Control Language="C#" ClassName="Example_Control" %>
    <%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>
    <ext:TextField ID="TextField1" runat="server" Width="255" />
    <ext:ComboBox ID="ComboBox1"
        runat="server"
        Width="255">
        <Items>
            <ext:ListItem Text="Item 1" Value="Item 1" />
        </Items>
    </ext:ComboBox>
    The Example-Control.ascx content will change all the time as different user controls are loaded.

    I would prefer not to have to do anything "special" to get the Accordion to work.

    Cheers,
    Timothy
  6. #6

    RE: [OPEN] ComboBox Rendering issue

    Hi Timothy,

    if you prefer not to have to do anything "special" to get the Accordion then all what I can suggest is to play with Width and List Width of Combo, like it:

         <ext:TextField ID="TextField1" runat="server" Width="255" />
         <ext:ComboBox ID="ComboBox1" runat="server" ListWidth="252" Width="238">
    
                <Items>
    
    
                      <ext:ListItem Text="Item 1" Value="Item 1" />                      
    
    
                 </Items>                                                                                  
    
    
         </ext:ComboBox>

  7. #7

    RE: [OPEN] ComboBox Rendering issue

    I believe if the <ext:ComboBox> was within a Layout Control, the ComboBox would be able to calculate it's dimensions correctly during render.*
    Geoffrey McGill
    Founder
  8. #8

    RE: [OPEN] ComboBox Rendering issue

    OK, what kind of Layout would you recommend? And can you also provide an example?

    Cheers,
    Timothy

Similar Threads

  1. Issue Regarding to open a window in New Tab
    By Roshan in forum 1.x Help
    Replies: 0
    Last Post: Aug 06, 2012, 3:06 PM
  2. [CLOSED] Rendering Issue in MVC
    By webppl in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Mar 21, 2012, 10:13 PM
  3. [CLOSED] IE 6 Rendering Issue
    By SymSure in forum 1.x Legacy Premium Help
    Replies: 13
    Last Post: Jun 14, 2011, 12:08 PM
  4. Replies: 2
    Last Post: Feb 21, 2011, 5:22 AM
  5. [CLOSED] [0.8.2] IE7 Rendering Issue
    By rcaunt in forum 1.x Legacy Premium Help
    Replies: 7
    Last Post: Jan 27, 2010, 6:42 AM

Posting Permissions