PDA

View Full Version : [CLOSED] DisplayField word wrap alignment



cwolcott
Dec 19, 2012, 2:24 AM
When I create the DisplayField in code behind and the text value is large the string is wrapped, but center align. Where if I create it in markup it is wrapped and left justified.



<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!DOCTYPE html >
<html>
<script runat="server">
protected void TestClick(object sender, DirectEventArgs e)
{
Notification.Show(new NotificationConfig
{
Title = "DisplayField BehindCode issue",
BodyStyle = "height: auto",
Width = 350,
Draggable = true,
ShowPin = true,
Pinned = true,
AlignCfg = new NotificationAlignConfig
{
El = ((Ext.Net.Button)sender).ConfigID,
ElementAnchor = AnchorPoint.TopLeft,
TargetAnchor = AnchorPoint.BottomRight,
OffsetX = 5,
OffsetY = -10,
},
Items =
{
new Ext.Net.FormPanel
{
BodyPadding = 2,
Border = false,
FieldDefaults = {LabelAlign=LabelAlign.Right, LabelWidth=50},
Defaults = {new Ext.Net.Parameter ("margin", "2 0 2 0", Ext.Net.ParameterMode.Value)},
Items =
{
new Ext.Net.DisplayField {FieldLabel="Label01", Text="Text01"},
new Ext.Net.DisplayField {FieldLabel="Label02", Text="This is a very long text string. In the behind code the string does not wrap correctly."},

}
}
}
});
}
</script>
<head runat="server">
<title></title>
</head>
<body>
<ext:ResourceManager runat="server" />
<ext:FormPanel runat="server" Width="380" BodyPadding="2" Border="false">
<FieldDefaults LabelAlign="Right" LabelWidth="50" />
<Defaults>
<ext:Parameter Name="margin" Value="2 0 2 0" Mode="Value" />
</Defaults>
<Items>
<ext:DisplayField runat="server" FieldLabel="Label01" Text="Text01" />
<ext:DisplayField runat="server" FieldLabel="Label02" Text="This is a very long text string. In the markup code the string wraps correctly." />
<ext:Button runat="server" Text="Test" OnDirectClick="TestClick" />
</Items>
</ext:FormPanel>
</body>
</html>

Daniil
Dec 19, 2012, 5:28 AM
Hi Chris,

Notification centers the text. There is such default CSS rule.

This

BodyStyle = "height: auto; text-align: left;"
makes the text left-aligned.

RCN
Dec 19, 2012, 12:10 PM
For me everything looks like ok. Am i missing something?

5287

Note: I tested against Ext.NET Pro 2.1 for ASP.NET WebForms relased on 2012-12-11

cwolcott
Dec 19, 2012, 1:12 PM
Please close the thread.

I am executing against the latest version of the trunk (Rev 4685 [Dec 18, 2012], using Chrome 23.0.1271.97) without the modification to BodyStyle the Displayfield with long text in the notification box is still centered.

5289

I have no problem adding the "text-align: left;" to the BodyStyle, but I am confused why the first DisplyField text "Text01" is not centered. It does not seem consistent.

EDIT: OK, inspecting the elements via the browser both the DisplayFields text elements are centered but the width is the exact size needed (text01 = 40px, Text02 = 272px). So I will just add the "text-align: left;" to the BodyStyle of my notification.

Daniil
Dec 19, 2012, 1:31 PM
For me everything looks like ok. Am i missing something?

5287

Note: I tested against Ext.NET Pro 2.1 for ASP.NET WebForms relased on 2012-12-11

This rule appeared after the 2.1 release. Previously, it was applied via the HTML style attribute.


EDIT: OK, inspecting the elements via the browser both the DisplayFields text elements are centered but the width is the exact size needed (text01 = 40px, Text02 = 272px). So I will just add the "text-align: left;" to the BodyStyle of my notification.

You were ahead of me:)

cwolcott
Dec 19, 2012, 5:00 PM
Thanks. Go ahead and close the thread.