autoheight when using content tag in panel dont work

  1. #1

    autoheight when using content tag in panel dont work

    i got all the data displaying and stuff except autoheight does not work. i am using a repeater in the content section of the panel which repeats ext controls(panel, fieldset, label and a button). even though i enable autoheight the panel doesn't adjust its size according to the content being repeated.
    Please help me.

    <%--BOTTOM RIGHT PANEL--%>
                        <ext:Panel runat="server" ID="Panel1" Title="Search For Solution" Flex="3" Icon="BookMagnify" AutoScroll="True">
                            <Items>
                                <%--BOTTOM RIGHT PANEL SEARCH SECTION--%>
                                <ext:Panel ID="pnlSearchProbDescription" runat="server">
                                    <LayoutConfig>
                                        <ext:VBoxLayoutConfig Align="Center" />
                                    </LayoutConfig>
                                    <Items>
                                        <ext:Container runat="server">
                                            <LayoutConfig>
                                                <ext:HBoxLayoutConfig Align="Middle" />
                                            </LayoutConfig>
                                            <Items>
                                                <ext:TextField runat="server" ID="txtProbDesc" FieldLabel="Problem description" Width="300"
                                                    Margins="20" LabelWidth="110" />
                                                <ext:Button runat="server" ID="btnSearchProbDesc" Text="Search" Padding="2" Margins="0 0 0 10"
                                                    Icon="Magnifier" OnClick="BtnSearchProbDescClick" AutoPostBack="True">
                                                </ext:Button>
                                            </Items>
                                        </ext:Container>
                                    </Items>
                                </ext:Panel>
                            </Items>
                            <%--repeater 1 for problems--%>
                            <Content>
                                <asp:Repeater ID="rptrProblems" runat="server">
                                    <ItemTemplate>
                                        <%--Hidden textbox for Problem ID to be used in repeater 2--%>
                                        <ext:TextField runat="server" ID="txtProbid" InputType="Hidden" Text='<%# Eval("PROB_ID") %>' />
                                        <%--Custom Design to view problems--%>
                                        <ext:Panel ID="pnlProbs" runat="server" BodyPadding="10" Border="false" Collapsible="True"
                                            Collapsed="False" Title='<%# "Problem ID: " + Eval("PROB_ID")%>' TitleAlign="Left" Height="300">
                                            <Items>
                                                <ext:FieldSet ID="fdstProbDescription" runat="server" Title="Problem Description">
                                                    <Items>
                                                        <ext:Label ID="lblProbDesc" runat="server" Text='<%# Eval("Description") %>' />
                                                    </Items>
                                                </ext:FieldSet>
                                            </Items>
                                            <Content>
                                                <%--REPEATER 2 FOR SOLUTIONS--%>
                                                <asp:Repeater ID="rptrSolutions" runat="server">
                                                    <ItemTemplate>
                                                        <%--Custom design to view solutions--%>
                                                        <ext:Panel runat="server" ID="pnlSolutionDesc" Title='<%# "Solution ID: " + Eval("SOL_ID") %>'
                                                            Collapsible="True" Border="false" Collapsed="True">
                                                            <Items>
                                                                <ext:FieldSet ID="fdstSolDescription" runat="server" Title="Solution Description">
                                                                    <Items>
                                                                        <ext:Label ID="lblSolDesc" runat="server" Text='<%# Eval("Description") %>' />
                                                                    </Items>
                                                                </ext:FieldSet>  
                                                            </Items>
                                                            <Buttons>
                                                                <ext:Button runat="server" ID="btnSelectSol" Text="Select Solution" Padding="2" Margins="0 10 10 0" Icon="ArrowEw" />
                                                            </Buttons>
                                                        </ext:Panel>
                                                    </ItemTemplate>
                                                    <%--CLOSE 2ND REPEATER FOR SOLUTIONS--%>
                                                </asp:Repeater>
                                            </Content>
                                        </ext:Panel>
                                    </ItemTemplate>
                                </asp:Repeater>
                                <%--CLOSE 1ST REPEATER FOR PROBLEMS--%>
                            </Content>
                        </ext:Panel>
                        <%--BOTTOM RIGHT PANEL CLOSED--%>
  2. #2

    Oh my god!!!!

    IS THIS FORUM SO DEAD THAT I CANT GET ANY HELP?

    somebody please help me here, sorry for the above but i am going insane trying to figure this out.
    all i want is for the panels to auto adjust its height but its not, i noticed it does not adjust if all the controls are put in the <content> section.

    i can not put the controls in the item section because i am using a repeater.

    an alternative was to use autoscroll BUT, when i use autoscroll=true for the main panel, some of the child panels that are repeated inside the main panel does not adjust its width smaller to allow space for the vertical scrollbar which causes the scrollbar to render above those panels.
    the child panels are collapsible so the scrollbar is blocking the collapse/expand button,

    PLEASE I BEG SOMEONE, can you please provide any alternatives to sorting this problem out?

    i just thought of 1 now, i am going to try using fieldsets instead of panels as the child controls and use autoscroll.(hopefully this helps)
  3. #3
    Hi,

    I guess the problem is that your sample doesn't really reproduce the problem. I copy/paste your sample into my local test project, and an Exception was thrown. I fixed that Exception and the Page loaded correctly, although it does appear to render correctly. I don't think the <asp:Repeater> is rendering anything because there was no data to bind it to, so I can't tell with confidence that there's any issue in there.

    My first guess would be to use <Items> or <Content>, but not both.

    Oh my god!!!!
    IS THIS FORUM SO DEAD THAT I CANT GET ANY HELP?
    This does not help. We answer at least 100+ posts in these forums a day, we try to help as many developers as we can, although priority has to be given to Premium Support members in the Premium Help forums.

    My absolute best advice would be to always provide a simplified code sample (.aspx or mvc) which clearly demonstrates how to reproduce the problem. The samples which allow a Tester to copy/paste the code into a local test project, then run (without having to make modifications/fixes) will almost always get a solid response.

    The following posts provide details for submitting new threads to the forums.

    http://forums.ext.net/showthread.php...ing-New-Topics

    http://forums.ext.net/showthread.php...ation-Required

    Hope this helps.
    Geoffrey McGill
    Founder
  4. #4

    Thank you

    Quote Originally Posted by geoffrey.mcgill View Post
    Hi,

    I guess the problem is that your sample doesn't really reproduce the problem. I copy/paste your sample into my local test project, and an Exception was thrown. I fixed that Exception and the Page loaded correctly, although it does appear to render correctly. I don't think the <asp:Repeater> is rendering anything because there was no data to bind it to, so I can't tell with confidence that there's any issue in there.

    My first guess would be to use <Items> or <Content>, but not both.

    [B][B]

    This does not help. We answer at least 100+ posts in these forums a day, we try to help as many developers as we can, although priority has to be given to Premium Support members in the Premium Help forums.

    My absolute best advice would be to always provide a simplified code sample (.aspx or mvc) which clearly demonstrates how to reproduce the problem. The samples which allow a Tester to copy/paste the code into a local test project, then run (without having to make modifications/fixes) will almost always get a solid response.

    The following posts provide details for submitting new threads to the forums.

    http://forums.ext.net/showthread.php...ing-New-Topics

    http://forums.ext.net/showthread.php...ation-Required

    Hope this helps.

    Hi geofrey

    Thanks for replying i really appreciate it and i'm sorry about that outburst, its just i haven't been helped before so thought i might not get helped again.

    i will read those 2 posts you provided and hopefully if you can help me after i post enough information.

    the code i have posted was not the full aspx page but just a portion of it and the data is retrieved through a wcf data service which uses entity
    framework. i will also try putting everything in the content section.

    could you please answer this 1 question i think it would help me:

    if i set autoheight= true on a panel and if i only add controls to the <content> section of that panel, Will the panel adjust its height automatically?

    Thanks you for your time and help.

    i could post some pics of what problem i am having if that could help?
  5. #5
    Quote Originally Posted by josh1zn View Post
    if i set autoheight= true on a panel and if i only add controls to the <content> section of that panel, Will the panel adjust its height automatically?
    In Ext.NET 2.x, there is no .AutoHeight property on <ext:Panel>. It's not required if Controls|Text|Html is added to the <Content> region. The Panel body is just a <div> and will stretch to fill it's content.

    The following sample demonstrates the scenario.

    <%@ Page Language="C#" %>
    
    <!DOCTYPE html>
    
    
    <html>
    <head runat="server">
        <title>Ext.NET Example</title>
    </head>
    <body>
        <ext:ResourceManager runat="server" />
    
    
        <ext:Panel runat="server" Title="Example">
            <Content>
                <asp:Label runat="server" Text="<div style='height:200px; width:200px; background-color:green;'>testing</div>" />
            </Content>
        </ext:Panel>
    </body>
    </html>
    Hope this helps.
    Geoffrey McGill
    Founder
  6. #6
    if i set autoheight= true on a panel and if i only add controls to the <content> section of that panel, Will the panel adjust its height automatically?
    It depends from added content and where the panel is located
    AutoHeight is just css rule 'height:auto' therefore there is no any guarantee that widget will resize correctly (it is that thing which is under a browser's control, not Ext.Net)
  7. #7
    Quote Originally Posted by geoffrey.mcgill View Post
    In Ext.NET 2.x, there is no .AutoHeight property on <ext:Panel>. It's not required if Controls|Text|Html is added to the <Content> region. The Panel body is just a <div> and will stretch to fill it's content.

    The following sample demonstrates the scenario.

    <%@ Page Language="C#" %>
    
    <!DOCTYPE html>
    
    
    <html>
    <head runat="server">
        <title>Ext.NET Example</title>
    </head>
    <body>
        <ext:ResourceManager runat="server" />
    
    
        <ext:Panel runat="server" Title="Example">
            <Content>
                <asp:Label runat="server" Text="<div style='height:200px; width:200px; background-color:green;'>testing</div>" />
            </Content>
        </ext:Panel>
    </body>
    </html>
    Hope this helps.

    oooooooooooh haha ok now i understand thank you very much!:) , by using what you said i think i can solve my problem but then i cant use autoscroll.

    if i can get the autoscroll to display properly then that will be great. i have a screen shot of the problem i'm having with scrollbar... please have a look.

    THANK YOU:)

    EDIT: i'm so sorry i noticed 1 thing the panels on the bottom right where not collapsible thats why it viewed like that but i changed it back to collapsible and now its rendering the first 3 panels width wrong and the rest correct just like the left panel in the picture. maybe this has something to do with the rendering?( i think maybe its rendering the first 3 panels then the scrollbar followed by the rest of the panels?)

    Click image for larger version. 

Name:	layout problem.jpg 
Views:	108 
Size:	99.3 KB 
ID:	4724
    Last edited by josh1zn; Sep 04, 2012 at 8:19 PM.
  8. #8
    Quote Originally Posted by josh1zn View Post
    if i can get the autoscroll to display properly then that will be great. i have a screen shot of the problem i'm having with scrollbar... please have a look.
    If the Panel does not have a Height, or the Height is not managed by a Layout, then setting .AutoHeight="true" isn't going to work. Scrolling needs a height that is smaller than the content.

    maybe this has something to do with the rendering?( i think maybe its rendering the first 3 panels then the scrollbar followed by the rest of the panels?)
    Yes, it is possible. Difficult to tell exactly, but obviously there is something wrong with your layout configuration.
    Geoffrey McGill
    Founder
  9. #9
    Quote Originally Posted by geoffrey.mcgill View Post
    If the Panel does not have a Height, or the Height is not managed by a Layout, then setting .AutoHeight="true" isn't going to work. Scrolling needs a height that is smaller than the content.



    Yes, it is possible. Difficult to tell exactly, but obviously there is something wrong with your layout configuration.
    Hi geofrey,

    i did a test and noticed that the panel adjusts its height according to the content when i use a layout. but i also realized that if i use a repeater in the content section then i cannot use a layout which prevents the panel from adjusting its height. i tried specifying a minheight for the panel but it doesnt grow if the content in the panel grows(when the repeater repeats more panels with content in it).

    i notice that if i add a layout to the main panel in this example, it adjusts its size but in the main program i am using a repeater in the content section so cannot use layout.

    Please help

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <ext:ResourceManager runat="server" />
            <ext:Panel runat="server" Title="Test Layout" Width="650" MinHeight="250" AutoHeight="True">
                <Content>
                    <ext:Panel runat="server" Title="ID: 1 - Date Sent: 2012/09/03 12:00:00 AM" Border="false" Collapsible="True">
                        <LayoutConfig>
                            <ext:VBoxLayoutConfig Align="Stretch"/>
                        </LayoutConfig>
                        <Items>
                            <ext:TextArea ID="TextArea1" runat="server" FieldLabel="<b>Description</b>" LabelAlign="Top" Text=""
                             ReadOnly="True" Margin="10"></ext:TextArea> 
                        </Items>
                        <Buttons>
                             <ext:Button ID="Button1" runat="server" Text="Submit" Padding="5" Margins="0 5 0 0">
                            </ext:Button>
                        </Buttons>
                    </ext:Panel>
                    <ext:Panel ID="Panel1" runat="server" Title="ID: 1 - Date Sent: 2012/09/03 12:00:00 AM" Border="false" Collapsible="True">
                        <LayoutConfig>
                            <ext:VBoxLayoutConfig Align="Stretch"/>
                        </LayoutConfig>
                        <Items>
                            <ext:TextArea ID="TextArea2" runat="server" FieldLabel="<b>Description</b>" LabelAlign="Top" Text=""
                             ReadOnly="True" Margin="10"></ext:TextArea> 
                        </Items>
                        <Buttons>
                             <ext:Button ID="Button2" runat="server" Text="Submit" Padding="5" Margins="0 5 0 0">
                            </ext:Button>
                        </Buttons>
                    </ext:Panel>
                    <ext:Panel ID="Panel2" runat="server" Title="ID: 1 - Date Sent: 2012/09/03 12:00:00 AM" Border="false" Collapsible="True">
                        <LayoutConfig>
                            <ext:VBoxLayoutConfig Align="Stretch"/>
                        </LayoutConfig>
                        <Items>
                            <ext:TextArea ID="TextArea3" runat="server" FieldLabel="<b>Description</b>" LabelAlign="Top" Text=""
                             ReadOnly="True" Margin="10"></ext:TextArea> 
                        </Items>
                        <Buttons>
                             <ext:Button ID="Button3" runat="server" Text="Submit" Padding="5" Margins="0 5 0 0">
                            </ext:Button>
                        </Buttons>
                    </ext:Panel>
                </Content>
            </ext:Panel>
        </div>
        </form>
    </body>
    </html>
    SCREENSHOT
    Click image for larger version. 

Name:	problem.jpg 
Views:	79 
Size:	74.4 KB 
ID:	4727
    Last edited by josh1zn; Sep 05, 2012 at 10:40 AM.
  10. #10
    Dear geofrey,

    Thank you for you time and help, i managed to find another way to solve this problem.

    i am not using a repeater at all instead i do everything manually in code behind c#.
    In the pageload event loop through the number of data items i have and in the loop i just call a method which takes in parameters(the data i want to display in the panel which are taken from each data item) and returns a panel which is added to the left panel.

    By doing it this way i can now use accordion layout and each panel that's added is now an accordionpane :)
    I'm so happy i found a great solution thats flexible.

    THANKS FOR THIS GREAT CONTROL KIT :D

    CHEERS:D

Similar Threads

  1. Help me dont work UserControl directmethod. plz
    By SeoNamseok in forum 2.x Help
    Replies: 0
    Last Post: Jul 09, 2012, 8:19 AM
  2. Replies: 0
    Last Post: Dec 04, 2011, 2:28 PM
  3. XScript dont work for me
    By farnold in forum 1.x Help
    Replies: 3
    Last Post: Apr 27, 2011, 2:56 PM
  4. Replies: 2
    Last Post: Mar 09, 2010, 12:55 PM
  5. [CLOSED] AutoHeight="true" does not work for a panel that load a page
    By flormariafr in forum 1.x Legacy Premium Help
    Replies: 5
    Last Post: Feb 25, 2010, 5:13 PM

Posting Permissions