Results 1 to 2 of 2

Thread: [6.2 Classic] FieldContainer does not take borders/padding into account when sizing

    Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Sencha Premium Member rkleinkromhof's Avatar
    Join Date
    Apr 2013
    Location
    Enschede, The Netherlands
    Posts
    53

    Default [6.2 Classic] FieldContainer does not take borders/padding into account when sizing

    The FieldContainer component and layout do not take borders/padding into account when sizing. When using borders and padding set by CSS and anchor: 100% on a child item, the child item is rendered too large.

    Fiddle here

    Expected: the field inside the fieldcontainer to be sized to the max available space, but not beyond.
    Found: the field uses the same width as the fieldcontainer, flowing over at the right side.

    Tested with:

    • Ext JS 6.2.1.167 - [Classic] Triton
    • Ext JS 6.2.1.167 - [Classic] Neptune


    Browsers:

    • Chrome 56.0.2924.87
    • Firefox 52.0 (64-bit)


    I've created a workaround for us. It's an override for the FieldContainer component layout. Here's the code:

    Code:
    Ext.define('Core.overrides.layout.component.field.FieldContainer', {
        override: 'Ext.layout.component.field.FieldContainer',
    
    
        publishInnerHeight: function (ownerContext, height) {
            // Height adjustment code taken from Ext.layout.component.Body#publishInnerHeight
            var innerHeight = height - ownerContext.getFrameInfo().height;
            var targetContext = ownerContext.targetContext;
    
    
            if (targetContext !== ownerContext) {
                innerHeight -= ownerContext.getPaddingInfo().height;
            }
    
    
            this.callParent([ownerContext, innerHeight]);
        },
    
    
        publishInnerWidth: function (ownerContext, width) {
            // Width adjustment code taken from Ext.layout.component.Body#publishInnerHeight
            var innerWidth = width - ownerContext.getFrameInfo().width;
            var targetContext = ownerContext.targetContext;
    
    
            if (targetContext !== ownerContext) {
                innerWidth -= ownerContext.getPaddingInfo().width;
            }
    
    
            this.callParent([ownerContext, innerWidth]);
        }
    });
    Last edited by rkleinkromhof; 8 Mar 2017 at 5:50 AM. Reason: added expected/found

  2. #2
    Sencha Premium Member rkleinkromhof's Avatar
    Join Date
    Apr 2013
    Location
    Enschede, The Netherlands
    Posts
    53

Similar Threads

  1. Replies: 3
    Last Post: 16 May 2013, 1:08 PM
  2. Replies: 2
    Last Post: 10 Jun 2012, 6:31 PM
  3. Replies: 4
    Last Post: 23 Apr 2009, 11:17 PM
  4. Replies: 2
    Last Post: 19 Apr 2009, 3:48 PM
  5. Replies: 2
    Last Post: 19 Apr 2009, 3:48 PM

Tags for this Thread

Posting Permissions

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