[CLOSED] IE7 and IE8 panel auto height

  1. #1

    [CLOSED] IE7 and IE8 panel auto height

    Hi there,

    I'm having issues in IE7 & IE8 when I try to build a a form with a form inside when I want both to expand vertically automatically with the content. It's like auto-height is not working in these browsers.

    This code works with no problems in IE10+ and the rest of the web browsers, however, it does not work properly in IE7 & IE8 (I haven't tested in IE9)

    *this snippet was put together for test purposes, real code is part of a larger system that generates controls dynamically

    <%@ Page Language="C#" %>
    
    <%@ Register assembly="Ext.Net" namespace="Ext.Net" tagprefix="ext" %>
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            renderForm();
        }
    
        private void renderForm()
        {
            Ext.Net.FormPanel panel = new FormPanel();
            panel.ID = "dlkjeljs";
            panel.Frame = false;
            panel.BodyStyle = "";
            panel.Border = false;
            panel.Width = 700;
            panel.MinHeight = 400;
            panel.Layout = "FormLayout";
    
            int i = 0;
            for (i = 1; i < 20; i++)
            {
                Ext.Net.AbstractComponent field = generateTextbox(i.ToString());
                if (field != null)
                    panel.Add(field);
            }
            uiCanva.Add(panel);
            panel.Render();
            uiCanva.Title = "Form: ";        
            X.Js.Call("checkLogic");          
        }
    
        private Ext.Net.TextField generateTextbox(string i)
        {
            TextField field = null;
            string emptyText = "";
            bool allowBlank = true;        
            emptyText = "value required";
            allowBlank = false;        
            
            field = new TextField
            {
                ID = i,
                Name = i,
                EmptyText = emptyText,
                AllowBlank = allowBlank,
                FieldLabel = "this is a nice label",
                Note = "some note",            
                LabelAlign = Ext.Net.LabelAlign.Top,                                                
                MsgTarget = Ext.Net.MessageTarget.Under,
                Hidden = false,
                Listeners = { Blur = { Handler = "checkLogic();" } }
            };
            
            field.Text = "some value";
            
            return field;
        }
    </script>
    
    <!DOCTYPE html>
        
    <html>
    <head runat="server">
        <title>Ext.NET Example</title>
    
        <script language="javascript" type="text/javascript">
            function checkLogic() {
               
            }
            
            function saveAndExit() {
                var canva = Ext.getCmp("uiCanva");
                if (canva.items.length > 0) {
                    canva.items.each(function (item) {
                        if (item.isValid()) {                        
                            Ext.Msg.alert("Congrats and Thank you!","You have completed ", logout);
                        } else {                
                            Ext.Msg.alert("Cannot continue!", "Please answer the questions marked in Red; you are required to answer them in order to continue.");
                        }
                    });
                }
            }
            
            function go(direction) {
                var mask = new Ext.LoadMask(Ext.getBody(), { msg: "Saving! Please wait..." });
                mask.show();    
                var canva = Ext.getCmp("uiCanva");
                if (canva.items.length > 0) {
                    canva.items.each(function (item) {
                        if (item.isValid()) {        
                            var endSurvey = 0;               
                            if(false) {
                                mask.hide();
                                Ext.MessageBox.confirm('Completion Notice', ' return to form.', function (btn) {
                                    if (btn == "yes") {
                                        //saveForm(item, direction, "1", mask);
                                    }
                                }); 
                            }else{
                                //saveForm(item, direction, "0", mask);
                            }
                        } else {
                            mask.hide();
                            Ext.Msg.alert("Cannot continue!", "Please answer .");
                        }
                    });
                }
            }                
        </script>
        
    </head>
    <body>
        <ext:ResourceManager runat="server" Theme="Gray" />
    
        <div style="width:802px;margin:0 auto;padding-top:13px;">
            <form id="Form1" runat="server">
                <ext:Panel ID="uiCanva" runat="server" Width="800" Frame="true" Icon="CalendarStar" Border="true" BodyPadding="10" MinHeight="400" BodyStyle="background-color:#FFFFFF;border:1px solid #cccccc;">
                    <BottomBar>
                    <ext:StatusBar ID="StatusBar1" runat="server" Border="false">  
                        <Items>
                            <ext:Button ID="uiPrevious" runat="server" Icon="RewindGreen" Text="Go to Previous Form" IconAlign="Left" Border="true" Frame="true">
                                <Listeners>
                                    <Click Handler="go('back');" />                                 
                                </Listeners>
                            </ext:Button>  
                            <ext:ToolbarSeparator ID="ToolbarSeparator1" runat="server" />               
                            <ext:Button ID="uiNext" runat="server" Icon="ForwardGreen" Text="Go to Next Form " IconAlign="Right">
                                <Listeners>
                                    <Click Handler="go('next');" />                                 
                                </Listeners>
                            </ext:Button>
                            <ext:Button ID="uiEnd" runat="server" Icon="BulletTick" Html="<span style='color:red;font-weight:bold;'>Complete Survey</span>" IconAlign="Left" Hidden="true">
                                <Listeners>
                                    <Click Handler="saveAndExit();" />                                 
                                </Listeners>
                            </ext:Button>
                        </Items>                        
                       </ext:StatusBar>
                    </BottomBar>
                </ext:Panel>
            </form>
        </div>
        
    </body>
    </html>
    Last edited by Daniil; Feb 28, 2014 at 4:30 AM. Reason: [CLOSED]
  2. #2
    Can you simplify your sample? I'm not entirely sure what I should be looking at.

    Is the BottomBar and your JavaScript functions related to the problem?
    Geoffrey McGill
    Founder
  3. #3
    Quote Originally Posted by geoffrey.mcgill View Post
    Can you simplify your sample? I'm not entirely sure what I should be looking at.

    Is the BottomBar and your JavaScript functions related to the problem?
    This is the simplified code:

    <%@ Page Language="C#" %>
    
    <%@ Register assembly="Ext.Net" namespace="Ext.Net" tagprefix="ext" %>
    
    <script runat="server">
    	protected void Page_Load(object sender, EventArgs e)
    	{
    		Ext.Net.FormPanel panel = new FormPanel();
    		panel.ID = "dlkjeljs";
    		panel.Frame = false;
    		panel.Border = false;
    		panel.Width = 700;
    		panel.MinHeight = 400;
    		panel.Layout = "FormLayout";
    
    		int i = 0;
    		for (i = 1; i < 20; i++)
    		{
    			Ext.Net.AbstractComponent field = generateTextbox(i.ToString());
    			if (field != null)
    				panel.Add(field);
    		}
    		uiCanva.Add(panel);
    		panel.Render();
    		uiCanva.Title = "Form: ";
    	}
    
    	private Ext.Net.TextField generateTextbox(string i)
    	{
    		TextField field = null;
    		string emptyText = "";
    		bool allowBlank = true;        
    		emptyText = "value required";
    		allowBlank = false;        
    		
    		field = new TextField
    		{
    			ID = i,
    			Name = i,
    			EmptyText = emptyText,
    			AllowBlank = allowBlank,
    			FieldLabel = "this is a nice label",
    			Note = "some note",            
    			LabelAlign = Ext.Net.LabelAlign.Top,                                                
    			MsgTarget = Ext.Net.MessageTarget.Under,
    			Hidden = false
    		};
    		
    		field.Text = "some value";
    		
    		return field;
    	}
    </script>
    
    <!DOCTYPE html>
    	
    <html>
    <head runat="server">
    	<title>Ext.NET Example</title>
    </head>
    <body>
    	<ext:ResourceManager runat="server" Theme="Gray" />
    
    	<div style="width:802px;margin:0 auto;padding-top:13px;">
    		<form id="Form1" runat="server">
    			<ext:Panel ID="uiCanva" runat="server" Width="800" Frame="true" Icon="CalendarStar" Border="true" BodyPadding="10" MinHeight="400" BodyStyle="background-color:#FFFFFF;border:1px solid #cccccc;">				
    			</ext:Panel>
    		</form>
    	</div>	
    </body>
    </html>
    IE10, FF, Chrome will display a form that has stretched vertically to accommodate the content, IE7 and IE8 have a predefined height and cut off the form. What I need is to have a consistent looking form; a form that stretches vertically to accommodate content.

    Click image for larger version. 

Name:	IE7.jpg 
Views:	6 
Size:	25.3 KB 
ID:	7618Click image for larger version. 

Name:	IE10.jpg 
Views:	7 
Size:	90.0 KB 
ID:	7619
  4. #4
    A JavaScript error occurs there.

    The IDs of the Components must start from a letter because it is used as ids of HTML elements.

    Please replace
    ID = i
    with
    ID = "a" + i
    http://stackoverflow.com/questions/7...ribute-in-html

    Also please remove
    panel.Render();
    No need to call the Render method in Page_Load. It is supposed to be used in a DirectEvent/DirectMethod only.
  5. #5
    Thanks Danil.
    However, that's not the issue I'm trying to fix.

    Please look at the images attached in the comment with the simplified code. This is the issue:
    IE10, FF, Chrome will correctly display a form that has stretched vertically to accommodate the content; however, IE7 and IE8 have a predefined height and cut off the form. What I need is to have a consistent looking form; a form that stretches vertically to accommodate content.

    One image is how it looks in IE10 and another one is how it looks in IE7 and IE8.
  6. #6
    Yes, I understand. But A JavaScript error breaks layouting. If fix the error, then the layout will be OK. At least, it is for me.

Similar Threads

  1. Replies: 2
    Last Post: Apr 15, 2013, 7:46 AM
  2. [CLOSED] How to set Auto Height of Tab Panel in ext js 4.0/ext.net 2.1
    By advBackOffice in forum 2.x Legacy Premium Help
    Replies: 4
    Last Post: Nov 07, 2012, 3:18 AM
  3. problem with ext panel auto height
    By venu.sn2009 in forum 1.x Help
    Replies: 2
    Last Post: Aug 10, 2011, 8:12 AM
  4. How to set auto height for a panel?
    By ganesh.tony in forum 1.x Help
    Replies: 0
    Last Post: Jul 01, 2011, 5:26 AM
  5. [CLOSED] Auto Height
    By speedstepmem4 in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Nov 19, 2008, 6:43 AM

Tags for this Thread

Posting Permissions