[FIXED] [#304] [3.2.0] Problem with TextArea bottom border in FireFox

  1. #1

    [FIXED] [#304] [3.2.0] Problem with TextArea bottom border in FireFox

    hi!

    I will having a little problem with textarea in firefox, after updating my ext.net to 2.2 (http://svn.ext.net/premium/branches/2.2)
    (before, I was using 2.1). The bottom border does not drawn!
    The textarea is contained into a container with hbox layout!
    See the sample running in all browsers

    Click image for larger version. 

Name:	problem with textarea in firefox.png 
Views:	22 
Size:	96.4 KB 
ID:	6576


    Sample project!

    <%@ Page Language="vb" %>
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    
    <script runat="server">
        Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    
            Ext.Net.ResourceManager.RegisterControlResources(Of Ext.Net.StatusBar)()
            
        End Sub
    </script>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title></title>
    
        <script type="text/javascript">
    
            Ext.onReady(function () {
                var viewPort = Ext.create("Ext.net.Viewport", {
                    id: "ViewportConsole",
                    renderTo: Ext.getBody(),
                    layout: "border",
                    padding: 10
                });
    
                var paneCenter = viewPort.add({
                    xtype: 'panel',
                    bodyPadding: 10,
                    layout: {
                        type: 'vbox',
                        align: 'stretch',
                        pack: 'top'
                    },
                    title: 'TextArea height problem',
                    region: 'center',
                    defaults: {
                        "labelAlign": "top"
                    }
                });
    
                var row1 = paneCenter.add({
                    xtype: 'container',
                    margins: '0 0 0 0',
                    layout: {
                        type: 'hbox',
                        align: 'center',
                        pack: 'top'
                    },
                    defaults: {
                        "labelAlign": "top"
                    }
                });
    
                var txtComments1 = row1.add({
                    xtype: 'textarea',
                    fieldLabel: 'Comments 1',
                    height: 100,
                    flex: 1
                });
                
                var row2 = paneCenter.add({
                    xtype: 'container',
                    margins: '5 0 0 0',
                    layout: {
                        type: 'hbox',
                        align: 'center',
                        pack: 'top'
                    },
                    defaults: {
                        "labelAlign": "top"
                    }
                });
    
                var txtComments2 = row2.add({
                    xtype: 'textarea',
                    fieldLabel: 'Comments 2',
                    height: 100,
                    flex: 1
                });
    
            });
    
        </script>
    
    </head>
    <body>
        <form id="form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
        <div>
        
        </div>
        </form>
    </body>
    </html>
    Last edited by Daniil; Jun 23, 2015 at 10:56 AM. Reason: [FIXED] [#304] [3.2.0]
  2. #2
    Hi @supera,

    Please try this fix.
    <style>
        .x-gecko textarea.x-form-text {
            margin-top: 0px;
            margin-bottom: 0px;
        }
    </style>
  3. #3
    Hi!

    Work's fine!

    Thanks!
  4. #4
    I discovered that a similar layout cause a loss of bottom border with the latest Ext.NET in all the browsers, not just in FireFox. Reported to Sencha.
    http://www.sencha.com/forum/showthread.php?268316
  5. #5
    Quote Originally Posted by Daniil View Post
    I discovered that a similar layout cause a loss of bottom border with the latest Ext.NET in all the browsers, not just in FireFox. Reported to Sencha.
    http://www.sencha.com/forum/showthread.php?268316
    Ok! Thanks Daniil!
  6. #6
    Sencha opened a bug. We created an Issue to track it.
    https://github.com/extnet/Ext.NET/issues/304
  7. #7
    The issue is not reproducible with ExtJS 5.1.1 and Ext.NET 3.2.0 which is already in SVN trunk and will be released soon. Closing the thread.

Similar Threads

  1. [CLOSED] How to setup ImageCommandColumn's border-bottom line?
    By capbarbell in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: May 06, 2013, 1:57 PM
  2. [CLOSED] Panel topBar bottom border of buttons .
    By supera in forum 2.x Legacy Premium Help
    Replies: 9
    Last Post: Oct 22, 2012, 10:44 AM
  3. [CLOSED] IE6 Combo box bottom border not rendered
    By musher in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Jul 09, 2012, 9:57 AM
  4. [CLOSED] FieldSet - Bottom border-line missing on IE-8
    By ndotis in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Feb 03, 2011, 5:04 PM
  5. [CLOSED] [1.0] ComboBox in IE6 - Bottom border not showing
    By danielg in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Nov 17, 2010, 10:13 AM

Posting Permissions