PDA

View Full Version : [CLOSED] Bug in fieldcontainer when using label align top



Akpenob
Jun 24, 2014, 12:31 PM
hello support

There is a bug with the fieldcontainer when using "LabelAlign.Top" on the any field inside the container..

the problem is that label becomes strecth and fields seems not to be displayed..

But this is only in chrome, i have tested in the following browsers.

IE. Firefox. Chrome, Opera, Safari.

Below are the code for the test side..

Client side:


<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Test.aspx.cs" Inherits="LIA.APP.WEB.LinkItAll.LiaLogin.Test" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" ViewStateMode="Disabled"
EnableViewState="false" Theme ="Neptune" />
<ext:Window ID="wndTest" runat="server" Layout="FitLayout" Width="800" Height="600">
</ext:Window>
</form>
</body>
</html>


Server side..


using Ext.Net;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace LIA.APP.WEB.LinkItAll.LiaLogin
{
public partial class Test : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
TabPanel tabpanel = new TabPanel();
tabpanel.DeferredRender = false;
tabpanel.ID = "tabpanel";

Ext.Net.Panel tabMain = new Ext.Net.Panel();
tabMain.Title = "Main";
tabMain.ID = "tabMain";
tabMain.Layout = "Border";
tabMain.BodyPadding = 0;

Ext.Net.Panel tabSecond = new Ext.Net.Panel();
tabSecond.Title = "Second";
tabSecond.ID = "tabSecond";
tabSecond.Layout = "Border";
tabSecond.BodyPadding = 0;

CreateLayout(tabMain, "main");
CreateLayout(tabSecond, "second");

tabpanel.Items.Add(tabMain);
tabpanel.Items.Add(tabSecond);

wndTest.Items.Add(tabpanel);

}

private void CreateLayout(AbstractPanel panel, string preFix)
{
Ext.Net.Panel pnlLeft = new Ext.Net.Panel();
pnlLeft.ID = "pnlLeft_"+preFix;
pnlLeft.Layout = "Fit";
pnlLeft.Border = true;
pnlLeft.BodyPadding = 5;
pnlLeft.Region = Region.Center;
pnlLeft.Flex = 1;

Ext.Net.Panel pnlInnerLeft = new Ext.Net.Panel();
pnlInnerLeft.ID = "pnlInnerLeft_" + preFix;
pnlInnerLeft.Layout = "Anchor";
pnlInnerLeft.Border = false;


Ext.Net.Panel pnlRight = new Ext.Net.Panel();
pnlRight.ID = "pnlRight_" + preFix;
pnlRight.Layout = "Fit";
pnlRight.Border = true;
pnlRight.BodyPadding = 5;
pnlRight.Region = Region.East;
pnlRight.Flex = 1;

Ext.Net.Panel pnlInnerRight = new Ext.Net.Panel();
pnlInnerRight.ID = "pnlInnerRight_" + preFix;
pnlInnerRight.Layout = "Anchor";
pnlInnerRight.Border = false;

for (var i = 1; i <= 1; i++)
{
FieldContainer fldCon = new FieldContainer();
fldCon.ID = "fldCon" + i + preFix;
fldCon.LayoutConfig.Add(new HBoxLayoutConfig() { Align = HBoxAlign.Middle, DefaultMargins = "0 3 0 0" });
fldCon.Flex = 1;

Checkbox chkBox = new Checkbox();
chkBox.ID = "chkBox" + i + preFix;
chkBox.Checked = true;

TextField txt = new TextField();
txt.Flex = 1;
txt.ID = "txt" + i + preFix;

Checkbox chkBox2 = new Checkbox();
chkBox.ID = "chkBox2" + i + preFix;
chkBox.Checked = false;

ComboBox cmb = new ComboBox();
cmb.ID = "cmb" + i + preFix;
cmb.Flex = 1;

fldCon.Items.Add(chkBox);
fldCon.Items.Add(txt);
fldCon.Items.Add(cmb);
fldCon.Items.Add(chkBox2);

if (i == 1 || i == 6)
{
chkBox.FieldLabel = "c1 " + preFix;
txt.FieldLabel = "txt " + preFix;
cmb.FieldLabel = "Cmb " + preFix;
chkBox2.FieldLabel = "c2 " + preFix;

chkBox.LabelAlign = LabelAlign.Top; //<-- THIS CAUSES THE FIRST CONTAINER TO FAIL
txt.LabelAlign = LabelAlign.Top; //<-- THIS CAUSES THE FIRST CONTAINER TO FAIL
cmb.LabelAlign = LabelAlign.Top; //<-- THIS CAUSES THE FIRST CONTAINER TO FAIL
chkBox2.LabelAlign = LabelAlign.Top; //<-- THIS CAUSES THE FIRST CONTAINER TO FAIL

}

if (i <= 5)
pnlInnerLeft.Items.Add(fldCon);
else
pnlInnerRight.Items.Add(fldCon);
}

pnlLeft.Items.Add(pnlInnerLeft);
pnlRight.Items.Add(pnlInnerRight);

panel.Items.Add(pnlLeft);
panel.Items.Add(pnlRight);
}
}
}


Is there anything that i can do to not have this behavior, since i need the label at the top of the fields in the container..

You can have a better view of the problem if you up the counter in the for loop..

Best
Regards Akpenob

Daniil
Jun 24, 2014, 2:11 PM
Hi @Akpenob,

Yes, there is a problem in Chrome with LabelAlign.Top.

As a workaround, please set explicit Width:

chkBox.LabelAlign = LabelAlign.Top; //<-- THIS CAUSES THE FIRST CONTAINER TO FAIL
txt.LabelAlign = LabelAlign.Top; //<-- THIS CAUSES THE FIRST CONTAINER TO FAIL
cmb.LabelAlign = LabelAlign.Top; //<-- THIS CAUSES THE FIRST CONTAINER TO FAIL
chkBox2.LabelAlign = LabelAlign.Top; //<-- THIS CAUSES THE FIRST CONTAINER TO FAIL

chkBox.Width = 50;
txt.Width = 120;
cmb.Width = 120;
chkBox2.Width = 50;

Akpenob
Jun 24, 2014, 2:23 PM
Hi Danill
I have already tried that but no luck...

To compensate for it i have made a panel above the fieldcontainer and placed Display fields with the same flex and width needed to get the same result..

Akpenob
Jun 24, 2014, 2:24 PM
Hi Danill
I have already tried that but no luck...

To compensate for it i have made a panel above the fieldcontainer and placed Display fields with the same flex and width needed to get the same result..

[Update]
After retrying your method, i got the same result.. it does work when you set the width on the labels :-)

Thanks for the quick response :-)

Best ragards
Akpenob