Feb 21, 2014, 10:10 PM
[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
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]