[CLOSED] Padding inside text field onblur

  1. #1

    [CLOSED] Padding inside text field onblur

    Hello,
    i've installed last version of Ext.Net via NuGet.
    I've tried to create simple form with this example:

    https://examples3.ext.net/#/Layout/FormLayout/Overview/

    my aspx page is

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="test.aspx.cs" Inherits="test" %>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title></title>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
            
            <h1>FormLayouts built in markup</h1>
            
            <h2>Form1 - Very Simple</h2>
    
            <ext:FormPanel 
                ID="Panel1" 
                runat="server" 
                Title="Simple Form"
                BodyPaddingSummary="5 5 0"
                Width="350"
                Frame="true"
                ButtonAlign="Center"
                Layout="FormLayout">
                <FieldDefaults MsgTarget="Side" LabelWidth="75" />
                <Plugins>
                    <ext:DataTip runat="server" />
                </Plugins>
                <Items>
                    <ext:TextField runat="server" FieldLabel="First Name" AllowBlank="false">
                        <CustomConfig>
                            <ext:ConfigItem Name="tooltip" Value="Enter your first name" />
                        </CustomConfig>
                        <AfterLabelTextTpl runat="server">
                            <Html>
                                <span style="color:red;font-weight:bold" data-qtip="Required">*</span>
                            </Html>
                        </AfterLabelTextTpl>
                    </ext:TextField>
                    <ext:TextField runat="server" FieldLabel="Last Name" AllowBlank="false">
                        <CustomConfig>
                            <ext:ConfigItem Name="tooltip" Value="Enter your last name" />
                        </CustomConfig>
                        <AfterLabelTextTpl runat="server">
                            <Html>
                                <span style="color:red;font-weight:bold" data-qtip="Required">*</span>
                            </Html>
                        </AfterLabelTextTpl>
                    </ext:TextField>
                    <ext:TextField runat="server" FieldLabel="Company">
                        <CustomConfig>
                            <ext:ConfigItem Name="tooltip" Value="Enter your employer's name" />
                        </CustomConfig>
                    </ext:TextField>
                    <ext:TextField runat="server" FieldLabel="Email" Vtype="email" AllowBlank="false">
                        <CustomConfig>
                            <ext:ConfigItem Name="tooltip" Value="Enter your email address" />
                        </CustomConfig>
                        <AfterLabelTextTpl runat="server">
                            <Html>
                                <span style="color:red;font-weight:bold" data-qtip="Required">*</span>
                            </Html>
                        </AfterLabelTextTpl>
                    </ext:TextField>
                    <ext:DateField runat="server" FieldLabel="DOB">
                        <CustomConfig>
                            <ext:ConfigItem Name="tooltip" Value="Enter your date of birth" />
                        </CustomConfig>
                    </ext:DateField>
                    <ext:NumberField runat="server" MinValue="0" MaxValue="100" FieldLabel="Age">
                        <CustomConfig>
                            <ext:ConfigItem Name="tooltip" Value="Enter your age" />
                        </CustomConfig>
                    </ext:NumberField>
                    <ext:TimeField runat="server" FieldLabel="Time" MinTime="08:00" MaxTime="18:00">
                        <CustomConfig>
                            <ext:ConfigItem Name="tooltip" Value="Enter a time" />
                        </CustomConfig>
                        <ListConfig>
                            <Plugins>
                                <ext:DataTip runat="server">
                                    <Tpl runat="server">
                                        <Html>
                                            Select time {date:date("G:i")}
                                        </Html>
                                    </Tpl>
                                </ext:DataTip>
                            </Plugins>
                        </ListConfig>
                    </ext:TimeField>
                </Items>
                <Buttons>
                    <ext:Button runat="server" Text="Save" Handler="this.up('form').getForm().isValid();" />
                    <ext:Button runat="server" Text="Cancel" Handler="this.up('form').getForm().reset();" />
                </Buttons>
            </ext:FormPanel>
    
            <h2>Form 2 - Adding fieldsets</h2>
            
            <ext:Panel 
                ID="Panel2" 
                runat="server"
                Title="Simple Form with FieldSets"
                PaddingSummary="5px 5px 0"
                Width="350"
                Frame="true"
                ButtonAlign="Center">
                <Items>
                    <ext:FieldSet 
                        runat="server"
                        CheckboxToggle="true"
                        Title="User Information"                    
                        Collapsed="true"
                        Layout="FormLayout">
                        <Defaults>
                            <ext:Parameter Name="LabelWidth" Value="75" Mode="Raw" />
                        </Defaults>
                        <Items>
                            <ext:TextField runat="server" FieldLabel="First Name" AllowBlank="false" />
                            <ext:TextField runat="server" FieldLabel="Last Name" />
                            <ext:TextField runat="server" FieldLabel="Company" />
                            <ext:TextField runat="server" FieldLabel="Email" />
                        </Items>
                    </ext:FieldSet>
                    <ext:FieldSet
                        runat="server"
                        Collapsible="true"                    
                        Title="Phone Number"
                        Layout="FormLayout">
                        <Defaults>
                            <ext:Parameter Name="LabelWidth" Value="75" Mode="Raw" />
                        </Defaults>
                        <Items>
                            <ext:TextField runat="server" FieldLabel="Home" Text="(888) 555-1212" />
                            <ext:TextField runat="server" FieldLabel="Business" />
                            <ext:TextField runat="server" FieldLabel="Mobile" />
                            <ext:TextField runat="server" FieldLabel="Fax" />
                        </Items>
                    </ext:FieldSet>
                </Items>
                <Buttons>
                    <ext:Button runat="server" Text="Save" />
                    <ext:Button runat="server" Text="Cancel" />
                </Buttons>
            </ext:Panel>
            
            <h2>Form 3 - A little more complex</h2>
            
            <ext:Panel 
                ID="Panel3"
                runat="server" 
                Title="Multi Column, Nested Layouts and Anchoring" 
                Frame="true"
                PaddingSummary="5px 5px 0"
                Width="600"
                ButtonAlign="Center">
                <Items>
                    <ext:Container runat="server" Layout="Column" Height="100">
                        <Items>
                            <ext:Container runat="server" Layout="FormLayout" ColumnWidth=".5" Padding="5">
                                <Items>
                                    <ext:TextField runat="server" FieldLabel="First Name" LabelAlign="Top" />
                                    <ext:TextField runat="server" FieldLabel="Company" LabelAlign="Top" />
                                </Items>
                            </ext:Container>
                            <ext:Container runat="server" Layout="FormLayout" ColumnWidth=".5" Padding="5">
                                <Items>
                                    <ext:TextField runat="server" FieldLabel="Last Name" LabelAlign="Top" />
                                    <ext:TextField runat="server" FieldLabel="Email" LabelAlign="Top" />
                                </Items>
                            </ext:Container>
                        </Items>
                    </ext:Container>
                    <ext:Container runat="server" Layout="FormLayout">
                        <Items>
                            <ext:HtmlEditor runat="server" Height="200" FieldLabel="Biography" LabelAlign="Top" />
                        </Items>
                    </ext:Container>
                </Items>
                <Buttons>
                    <ext:Button runat="server" Text="Save" />
                    <ext:Button runat="server" Text="Cancel" />
                </Buttons>
            </ext:Panel>
            
            <h2>Form 4 - Forms can be a TabPanel...</h2>
            
            <ext:Panel
                ID="Panel4"
                runat="server"
                Border="false"
                Width="350"
                ButtonAlign="Center"
                Layout="Fit">
                <Items>
                    <ext:TabPanel runat="server" ActiveTabIndex="0">
                        <Items>
                            <ext:Panel 
                                runat="server" 
                                Title="Personal Details" 
                                BodyPadding="10"
                                Layout="FormLayout">
                                <Defaults>
                                    <ext:Parameter Name="LabelWidth" Value="75" Mode="Raw" />
                                </Defaults>
                                <Items>
                                    <ext:TextField runat="server" FieldLabel="First Name" AllowBlank="false" />
                                    <ext:TextField runat="server" FieldLabel="Last Name" />
                                    <ext:TextField runat="server" FieldLabel="Company" />
                                    <ext:TextField runat="server" FieldLabel="Email" />
                                </Items>
                            </ext:Panel>
                            <ext:Panel 
                                runat="server"
                                Title="Phone Numbers"
                                BodyPadding="10"
                                Layout="FormLayout">
                                <Defaults>
                                    <ext:Parameter Name="LabelWidth" Value="75" Mode="Raw" />
                                </Defaults>
                                <Items>
                                    <ext:TextField runat="server" FieldLabel="Home" Text="(888) 555-1212" />
                                    <ext:TextField runat="server" FieldLabel="Business" />
                                    <ext:TextField runat="server" FieldLabel="Mobile" />
                                    <ext:TextField runat="server" FieldLabel="Fax" />
                                </Items>
                            </ext:Panel>
                        </Items>
                    </ext:TabPanel>
                </Items>
                <Buttons>
                    <ext:Button runat="server" Text="Save" />
                    <ext:Button runat="server" Text="Cancel" />
                </Buttons>
            </ext:Panel>
            
            <h2>Form 5 - Form with TabPanel</h2>
            
            <ext:Panel
                ID="Panel5"
                runat="server"
                Title="Inner Tabs"
                Width="600"
                BodyPadding="5"
                ButtonAlign="Center">
                <Items>
                    <ext:Container runat="server">
                        <Items>
                            <ext:Container runat="server" Layout="FormLayout" ColumnWidth=".5">
                                <Items>
                                    <ext:TextField runat="server" FieldLabel="First Name" LabelAlign="Top" />
                                    <ext:TextField runat="server" FieldLabel="Company" LabelAlign="Top" />
                                </Items>
                            </ext:Container>
                            <ext:Container runat="server" Layout="FormLayout" ColumnWidth=".5">
                                <Items>
                                    <ext:TextField runat="server" FieldLabel="Last Name" LabelAlign="Top" />
                                    <ext:TextField runat="server" FieldLabel="Email" LabelAlign="Top" />
                                </Items>
                            </ext:Container>
                        </Items>
                    </ext:Container>
                    <ext:TabPanel 
                        runat="server" 
                        MarginSpec="5px 0px 0px 0px"
                        ActiveTabIndex="0" 
                        Plain="true"
                        Height="235">
                        <Items>
                            <ext:Panel
                                runat="server" 
                                Title="Personal Details" 
                                BodyPadding="10"
                                Layout="FormLayout">
                                <Defaults>
                                    <ext:Parameter Name="LabelWidth" Value="75" Mode="Raw" />
                                    <ext:Parameter Name="LabelAlign" Value="top" Mode="Value" />
                                </Defaults>
                                <Items>
                                    <ext:TextField runat="server" FieldLabel="First Name" AllowBlank="false" Width="230" />
                                    <ext:TextField runat="server" FieldLabel="Last Name" Width="230" />
                                    <ext:TextField runat="server" FieldLabel="Company" Width="230" />
                                    <ext:TextField runat="server" FieldLabel="Email" Width="230" />
                                </Items>
                            </ext:Panel>
                            <ext:Panel
                                runat="server"
                                Title="Phone Numbers"
                                BodyPadding="10"
                                Layout="FormLayout">
                                <Defaults>
                                    <ext:Parameter Name="LabelWidth" Value="75" Mode="Raw" />
                                    <ext:Parameter Name="LabelAlign" Value="top" Mode="Value" />
                                </Defaults>
                                <Items>
                                    <ext:TextField runat="server" FieldLabel="Home" Text="(888) 555-1212" Width="230" />
                                    <ext:TextField runat="server" FieldLabel="Business" Width="230" />
                                    <ext:TextField runat="server" FieldLabel="Mobile" Width="230" />
                                    <ext:TextField runat="server" FieldLabel="Fax" Width="230" />
                                </Items>
                            </ext:Panel>
                            <ext:Panel
                                runat="server"
                                Title="Biography"
                                BodyPadding="10"
                                Layout="Fit">
                                <Items>
                                    <ext:HtmlEditor runat="server" />
                                </Items>
                            </ext:Panel>
                            <ext:Panel 
                                ID="Tab4"
                                runat="server"
                                Title="Tab 4"
                                Layout="FormLayout"
                                BodyPadding="10" >
                                 <Defaults>
                                    <ext:Parameter Name="LabelWidth" Value="75" Mode="Raw" />
                                    <ext:Parameter Name="LabelAlign" Value="top" Mode="Value" />
                                </Defaults>
                                <Items>
                                    <ext:TextField runat="server" FieldLabel="Name" Width="230" />
                                    <ext:TextField runat="server" FieldLabel="Age" Width="230" />
                                </Items>
                            </ext:Panel>
                        </Items>
                    </ext:TabPanel>
                </Items>
                <Buttons>
                    <ext:Button runat="server" Text="Save" />
                    <ext:Button runat="server" Text="Cancel" />
                </Buttons>
            </ext:Panel>
        </form>
    </body>
    </html>
    (is your code)

    The problem is thath with Chrome (43.0.2357.134), when i write inside a textfield and after i move to another field/outside (onblur) my txt goes down inside a filed.
    See image Click image for larger version. 

Name:	ImmagineEXT_NET.png 
Views:	48 
Size:	30.6 KB 
ID:	24089

    What is the problem?

    Thanks!
    Maurizio
    Last edited by Daniil; Jul 20, 2015 at 1:29 PM. Reason: [CLOSED]
  2. #2
    Hi @maurox,

    Thank you for the report, but the issue has been fixed in 3.2.0.
    https://github.com/extnet/Ext.NET/issues/811

    It is not reproducible with the online example that you mentioned. Can you reproduce?
    https://examples3.ext.net/#/Layout/FormLayout/Overview

    Also I just tried with a new project installing Ext.NET from NuGet and it is also not reproducible to me.

    I have the only idea - somehow your project uses the old Ext.NET dlls, not 3.2.0. Please clarify has the project been rebuilt after Ext.NET installation from NuGet?

    Also please try to clear the browser's cache. To do that you can reload the page with Ctrl+F5.
  3. #3
    Ok, my version was 3.1

    I installed it via Nuget on 15 or 16 of July without version (only 'Install-Package Ext.NET' and it resolve to 3.1)...

    However i upgraded to 3.2 and now works.

    Thanks a lot

    Maurizio

Similar Threads

  1. [CLOSED] Enabling the text field inside the gridpanel on check box selection
    By arjunrvasisht in forum 2.x Legacy Premium Help
    Replies: 18
    Last Post: Apr 30, 2015, 11:23 AM
  2. Number Field Clear OnBlur event
    By ITECH-Developer in forum 1.x Help
    Replies: 1
    Last Post: Dec 06, 2012, 3:22 PM
  3. Replies: 0
    Last Post: Dec 28, 2011, 9:30 AM
  4. Fieldset padding inside a ColumnLayout
    By Coltonis in forum 1.x Help
    Replies: 0
    Last Post: Jul 09, 2010, 1:13 AM
  5. Replies: 1
    Last Post: May 10, 2009, 2:15 PM

Posting Permissions