[CLOSED] Bug in fieldcontainer when using label align top

  1. #1

    [CLOSED] Bug in fieldcontainer when using label align top

    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
    Last edited by Daniil; Jun 24, 2014 at 9:54 PM. Reason: [CLOSED]
  2. #2
    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;
  3. #3
    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..
    Last edited by geoffrey.mcgill; Jun 24, 2014 at 3:12 PM.
  4. #4
    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
    Last edited by geoffrey.mcgill; Jun 24, 2014 at 3:12 PM.

Similar Threads

  1. [CLOSED] Align button and textbox with fieldcontainer.
    By luiz in forum 2.x Legacy Premium Help
    Replies: 4
    Last Post: Aug 03, 2013, 9:48 PM
  2. [CLOSED] How to align linkbuttons and label vertically
    By jchau in forum 2.x Legacy Premium Help
    Replies: 1
    Last Post: Apr 23, 2013, 5:53 PM
  3. [CLOSED] FieldContainer label placement
    By cwolcott in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: Sep 21, 2012, 1:26 PM
  4. Label Align
    By flaviodamaia in forum 1.x Help
    Replies: 1
    Last Post: Jul 29, 2009, 9:37 AM
  5. [CLOSED] Label Right Align
    By Etisbew in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Jun 16, 2009, 11:30 AM

Tags for this Thread

Posting Permissions