Looks like we can't reproduce the issue or there's a problem in the test case provided.
  1. #1
    Ext JS Premium Member
    Join Date
    Sep 2007
    Posts
    55
    Vote Rating
    0
    mvarshavsky is on a distinguished road

      0  

    Default Flex Box Layouts Are Broken

    Flex Box Layouts Are Broken


    REQUIRED INFORMATION


    Ext version tested:
    • Sencha Touch 2.0

    Browser versions tested against:
    • Chrome 17
    • Mobile Safari


    Description:
    • Hbox flex proportions are not respected when contents are wider than available space.

    Steps to reproduce the problem:
    • Run the code in test case

    The result that was expected:
    • Right-most item should be visible and middle item should fill remaining space

    The result that occurs instead:
    • Middle item assumes the width of its child, right-most item is pushed out of viewport

    Test Case:

    Code:
    Ext.application({
      name: 'Sencha',
      launch: function() {
        Ext.create("Ext.Panel", {
          fullscreen: true,
          layout: {
            type: 'hbox',
            align: 'stretch'
          },
          items: [
            {
              width: 100,
              style: 'background:purple'
            }, {
              flex: 1,
              style: 'background:limegreen;overflow:hidden;',
              html: '<div style="width:3000px;">long div</div>'
            }, {
              width: 100,
              style: 'background:purple'
            }
          ]
        });
      }
    });

  2. #2
    Sencha - Sencha Touch Dev Team Jamie Avins's Avatar
    Join Date
    Mar 2007
    Location
    Redwood City, California
    Posts
    3,661
    Vote Rating
    21
    Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough

      0  

    Default


    In order for the flexed item to overflow, you will need to either set it to scrollable: true or make it's x-inner have absolute positioning. Scrolling is the typical case.

    Sencha Inc

    Jamie Avins

    @jamieavins

Thread Participants: 1

Tags for this Thread