PDA

View Full Version : [CLOSED] IE7 and IE8 panel auto height



SoftwareMHC
Feb 21, 2014, 11:10 PM
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>

geoffrey.mcgill
Feb 22, 2014, 12:07 AM
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?

SoftwareMHC
Feb 24, 2014, 3:59 PM
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.

76187619

Daniil
Feb 25, 2014, 4:19 AM
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/70579/what-are-valid-values-for-the-id-attribute-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.

SoftwareMHC
Feb 25, 2014, 7:05 AM
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.

Daniil
Feb 25, 2014, 8:06 AM
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.