[CLOSED] Label + FieldLabel vertical align inside TableLayout

  1. #1

    [CLOSED] Label + FieldLabel vertical align inside TableLayout

    Hi,

    I'm trying to set up some controls for a form. I wanted to use a Container to achieve the layout I want but there seems to be an issue with the Label control. I tried using a container with HBoxLayout, but it failed because I cannot set a height on the label at design time (not knowing how large it will need to be at runtime). Thus, I next tried a TableLayout.

    This is almost correct, except that the vertical alignment between the fieldlabel and the actual label html is off:

    Click image for larger version. 

Name:	extLabelVert.png 
Views:	163 
Size:	51.7 KB 
ID:	3222

    Here is a simple example to reproduce the issue:

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Test.aspx.cs" Inherits="LW4.WWW.Admin.Web.Test" %>
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <ext:ResourcePlaceHolder runat="server"></ext:ResourcePlaceHolder>    
    </head>
    <body>
        <form id="form1" runat="server">
            <ext:ResourceManager runat="server" ID="ResourceManager1" />            
            <ext:Viewport runat="server" ID="ViewportMain" Layout="FitLayout">
                <Items>                
                    <ext:Panel runat="server" ID="PanelMain" Layout="FormLayout" Padding="20">
                        <Items>
                            <ext:Container ID="Container1" runat="server" Layout="TableLayout">
                                <Items>
                                    <ext:Button runat="server" ID="btnEditLongName" Icon="Pencil" StyleSpec="margin-right: 8px;"></ext:Button>
                                    <ext:Label runat="server" ID="lblDocumentContentLongName" FieldLabel="Long Name" Anchor="99%" Text="A very long document name that takes up quite a bit of screen real estate."></ext:Label>
                                </Items>
                            </ext:Container>
                        </Items>
                    </ext:Panel>                
                </Items>            
            </ext:Viewport>        
        </form>
    </body>
    </html>
    I've done some research and I think I can fix this by applying some css via the ItemCls class, but I wondered if there were another way to do it? If not, advice about my ItemCls idea would be welcome.

    Thanks!
    Last edited by geoffrey.mcgill; Sep 28, 2011 at 3:46 AM. Reason: [CLOSED]
  2. #2
    Hi,

    Using FieldLabel in FormLayout context gives more consistent result.

    So, to fix I can suggest you to wrap a label in an additional container with FormLayout.

    Example
    <ext:Container runat="server" Layout="FormLayout">
        <Items>
            <ext:Label 
                runat="server" 
                FieldLabel="Long Name" 
                Text="A very long document name that takes up quite a bit of screen real estate." />
        </Items>
    </ext:Container>

Similar Threads

  1. Label FieldLabel vertical align issue
    By alexot in forum 1.x Help
    Replies: 1
    Last Post: Jan 03, 2012, 1:35 PM
  2. [CLOSED] Align label inside the button
    By majunior in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Mar 19, 2011, 3:21 AM
  3. [CLOSED] [1.0] GridPanel Column Vertical Align
    By Timothy in forum 1.x Legacy Premium Help
    Replies: 6
    Last Post: Apr 12, 2010, 9:37 AM
  4. [CLOSED] Label Right Align
    By Etisbew in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Jun 16, 2009, 11:30 AM
  5. FieldLabel Align
    By flaviodamaia in forum 1.x Help
    Replies: 4
    Last Post: Jan 16, 2009, 10:56 AM

Posting Permissions