What's New?

[CLOSED] TextField notes are wrapped now right at the right margin of the TextField

  1. #1
    Oct 03, 2014, 1:10 AM

    [CLOSED] TextField notes are wrapped now right at the right margin of the TextField

    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>
    Last edited by Daniil; Oct 14, 2014 at 12:52 PM. Reason: [CLOSED]
  2. #2
    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.
  3. #3
    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.
    Last edited by bogc; Oct 03, 2014 at 6:56 PM.
  4. #4
    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.
  5. #5
    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>
  6. #6
    Oct 07, 2014, 5:39 AM
    Thank you.

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

Similar Threads

  1. [CLOSED] Disabled textfield not posting updated text to DirectEvent if textfield is setValue in client javascript.
    By michaeld in forum 2.x Legacy Premium Help
    Replies: 5
    Last Post: Aug 16, 2013, 2:40 PM
  2. [OPEN] [#152] textfield + setIconCls: Issue when set iconCls after entering some value in textfield
    By supera in forum 2.x Legacy Premium Help
    Replies: 6
    Last Post: Feb 21, 2013, 4:44 AM
  3. [CLOSED] Grid Tooltip not wrapped in certain conditions
    By bogc in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Nov 01, 2011, 12:56 PM
  4. [CLOSED] menu wrapped
    By nhg_itd in forum 1.x Legacy Premium Help
    Replies: 9
    Last Post: Oct 25, 2011, 1:42 AM
  5. [CLOSED] FileUploadField wrapped in MultiField
    By jon in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Dec 29, 2009, 12:08 PM

Posting Permissions