Results 1 to 3 of 3

Thread: numercfield border issue

    Looks like we can't reproduce the issue or there's a problem in the test case provided.
  1. #1
    Touch Premium Member
    Join Date
    Jul 2011
    Posts
    29

    Default numercfield border issue

    Hi all,
    I've got one graphic issue.
    I create several components with this code

    Code:
    new Ext.form.Panel({
        fullscreen : true,
        items      : {
            xtype    : 'fieldset',
            title    : 'Test',
            layout   : 'vbox',
            defaults : {
                required   : false,
                labelAlign : 'left',
                labelWidth : '40%'
            },
            items    : [
                {
                    xtype  : 'panel',
                    layout : 'hbox',
                    items  : [
                        {
                            xtype     : 'numberfield',
                            label     : 'Servito',
                            clearIcon : false,
                            maxLength : 1,
                            cls       : 'align-text-right',
                            flex      : 0.5,
                            value     : 1
                        },
                        {
                            xtype   : 'label',
                            padding : '15 0 0 0',
                            html    : ',',
                            style   : 'background-color: #D8D8D8;'
                        },
                        {
                            xtype     : 'numberfield',
                            border    : '5 5 5 5',
                            clearIcon : false,
                            maxLength : 3,
                            flex      : 2,
                            value     : 876
                        }
                    ]
                },
                {
                    xtype  : 'panel',
                    layout : 'hbox',
                    items  : [
                        {
                            xtype     : 'numberfield',
                            label     : 'Self',
                            clearIcon : false,
                            maxLength : 1,
                            cls       : 'align-text-right',
                            flex      : 0.5,
                            value     : 1
                        },
                        {
                            xtype   : 'label',
                            padding : '15 0 0 0',
                            html    : ',',
                            style   : 'background-color: #D8D8D8;'
                        },
                        {
                            xtype     : 'numberfield',
                            border    : '5 5 5 5',
                            clearIcon : false,
                            maxLength : 3,
                            flex      : 2,
                            value     : 876
                        }
                    ]
                }
            ]
        }
    });
    and then I add them into one panel object.
    When I render I cannot see the border line between the second numberfield (those with maxLenght:3).
    This is a sample image of the issue.
    Thanks a lot.
    Attached Images Attached Images
    Last edited by mitchellsimoens; 31 Jul 2012 at 8:58 AM. Reason: update testcase

  2. #2
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,448

    Default

    I'm actually going to report this as a bug. It's a CSS issue, the .x-form-fieldset .x-field:last-child is setting the border-bottom to zero.

    For now you can just override the CSS on the field to give it border-bottom: 1 sold #DDD;
    Mitchell Simoens @LikelyMitch

    Check out my GitHub:
    https://github.com/mitchellsimoens

    Posts are my own, not any current, past or future employer's.

  3. #3
    Sencha User rdougan's Avatar
    Join Date
    Oct 2008
    Posts
    1,159

    Default

    Unfortunately we do not support this layout when used within fieldsets. You will have to modify your CSS appropriately to ensure it looks as expected.
    Sencha Inc.
    Robert Dougan - @rdougan
    Sencha Touch 2 and Ext JS 4 Core Team Member, SASS/Theming Wizard.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •