PDA

View Full Version : [CLOSED] TextField notes are wrapped now right at the right margin of the TextField



bogc
Oct 03, 2014, 1:10 AM
Hello again:

In Ext.Net 2.5.2, the note of a TextField wraps at the right border of the text field. It didn't used to in Ext.net 2.1.1.

Here is a sample to see what happens (I modified this sample: /#/Form/Field_Note/Overview/).


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

<%@ Register assembly="Ext.Net" namespace="Ext.Net" tagprefix="ext" %>

<!DOCTYPE html>

<html>
<head runat="server">
<title>Field Note - Ext.NET Examples</title>
<link href="/resources/css/examples.css" rel="stylesheet" />

<style>
.red-note {
color: red !important;
}
</style>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />

<h2>1. Simple note </h2>

<ext:TextField runat="server" Note="Simple note lengthy note - yupee kai yei" IndicatorText="I am the indicator text"/>

<h2>2. Top note</h2>

<ext:ComboBox runat="server" Note="Top note" NoteAlign="Top" />

<h2>3. Custom note</h2>

<ext:TextArea runat="server" BoxLabel="CheckBox" Note="Red note" NoteCls="red-note" />

<h2>4. FormPanel with notes</h2>

<ext:FormPanel runat="server" BodyPadding="5" Width="270" Height="180">
<Items>
<ext:TextField runat="server" FieldLabel="Field1" Note="Description" />
<ext:TextField runat="server" FieldLabel="Field2" Note="Description" />
<ext:TextField runat="server" FieldLabel="Field3" Note="Description" />
<ext:TextField runat="server" FieldLabel="Field4" Note="Description" />
</Items>
</ext:FormPanel>
</form>
</body>
</html>

If fixed this using a css class for the note. The weird thing is that, in this case, if I don't specify a width for the text field, the text field grows horizontally as big as the note.



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

<%@ Register assembly="Ext.Net" namespace="Ext.Net" tagprefix="ext" %>

<!DOCTYPE html>

<html>
<head runat="server">
<title>Field Note - Ext.NET Examples</title>
<link href="/resources/css/examples.css" rel="stylesheet" />

<style>
.red-note {
color: red !important;
}
.notesForever {
overflow: visible;
white-space:nowrap;
}
</style>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />

<h2>1. Simple note </h2>

<ext:TextField runat="server" Note="Simple note lengthy note - yupee kai yei" IndicatorText="I am the indicator text" NoteCls="notesForever"/>

<h2>2. Top note</h2>

<ext:ComboBox runat="server" Note="Top note" NoteAlign="Top" />

<h2>3. Custom note</h2>

<ext:TextArea runat="server" BoxLabel="CheckBox" Note="Red note" NoteCls="red-note" />

<h2>4. FormPanel with notes</h2>

<ext:FormPanel runat="server" BodyPadding="5" Width="270" Height="180">
<Items>
<ext:TextField runat="server" FieldLabel="Field1" Note="Description" />
<ext:TextField runat="server" FieldLabel="Field2" Note="Description" />
<ext:TextField runat="server" FieldLabel="Field3" Note="Description" />
<ext:TextField runat="server" FieldLabel="Field4" Note="Description" />
</Items>
</ext:FormPanel>
</form>
</body>
</html>

Daniil
Oct 03, 2014, 10:02 AM
Hi @bogc,


The weird thing is that, in this case, if I don't specify a width for the text field, the text field grows horizontally as big as the note.

I see the same behavior with Ext.NET v2.1.1 (with the first example which is without the CSS fix). So, it looks you were able to get Ext.NET v2.1.1 behavior in this part. It looks to be your goal on that, doesn't?

At first glance, I don't see a way to get a note fully visible without growing an input field as well, because a note is not a floating element. Maybe, it should. Though, such a change is not going to happen for Ext.NET v2.x for sure. Maybe, for v3 at some point, but also uncertain.

bogc
Oct 03, 2014, 6:42 PM
I see the same behavior with Ext.NET v2.1.1 (with the first example which is without the CSS fix).

Sorry, I haven't tested the sample I posted in version 2.1.1. What happened was that in the previous version the note was not wrapped on the form in the real app, while in 2.5.2 the note was wrapped. I then created the sample which I posted here, but I never went back to test it in 2.1.1 assuming I would see the same behavior as it is in my app. Sometimes there is a combination of things in the app that leads to a certain behavior. Often, while your examples work fine, something similar in my app doesn't work, then I start adding more code to the example closer to what it is in the real app until I get the same behavior.

Daniil
Oct 04, 2014, 8:14 AM
Yes, that happens.

Could you, please, provide a test case for v2.1.1 which works as you need? Then we could try to convert it to v2.5.2.

bogc
Oct 07, 2014, 12:34 AM
Hi, Daniil:

Here is a sample app where the first note gets wrapped in 2.5.2 but not in 2.1.1:



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

<%@ Register assembly="Ext.Net" namespace="Ext.Net" tagprefix="ext" %>

<!DOCTYPE html>

<html>
<head id="Head1" runat="server">
<title>Field Note - Ext.NET Examples</title>
<link href="/resources/css/examples.css" rel="stylesheet" />

<style>
.red-note {
color: red !important;
}
</style>
</head>
<body>
<form id="Form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" />

<h2>4. FormPanel with notes</h2>

<ext:FormPanel ID="FormPanel1" runat="server" BodyPadding="5" Width="800" Height="180">
<Items>
<ext:TextField ID="TextField2" runat="server" FieldLabel="Field1" Note="Simple note lengthy note - yupee kai yei invasion of aliens men in black" InputWidth="250"/>
<ext:TextField ID="TextField3" runat="server" FieldLabel="Field2" Note="Description" InputWidth="250"/>
<ext:TextField ID="TextField4" runat="server" FieldLabel="Field3" Note="Description" InputWidth="500"/>
<ext:TextField ID="TextField5" runat="server" FieldLabel="Field4" Note="Description" Anchor="95%"/>
</Items>
</ext:FormPanel>
</form>
</body>
</html>

Daniil
Oct 07, 2014, 5:39 AM
Thank you.

Please try this:

<style>
.x-field-note {
white-space: nowrap;
}
</style>