Sep 20, 2011, 10:19 PM
[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:
Here is a simple example to reproduce the issue:
Thanks!
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:
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]