Results 1 to 2 of 2

Thread: "max-width" style not honored inside plain Ext.Component on Android

    You found a bug! We've classified it as EXTJS-17759 . We encourage you to continue the discussion and to find an acceptable workaround while we work on a permanent fix.
  1. #1
    Ext JS Premium Member Greendrake's Avatar
    Join Date
    Jul 2008
    Location
    New Zealand
    Posts
    200

    Default "max-width" style not honored inside plain Ext.Component on Android

    This is a weird issue with handling the max-width CSS property.
    It can be seen happening in the following circumstances together:
    • inside components with xtype: 'box' (if using xtype: 'container' then all good)
    • when scrollable: 'y' is set
    • on Android devices (all good in desktop browsers)
    Consider this HTML (supposed to fit the image in the outer box/container no matter what its width is, but never exceed 800 pixels):
    Code:
    <div>
        <div style="width: 800px; max-width: 100%;">
            <div style="background-image: url('http://cdn.greendrake.info/xfile/content-wzit/xs/adapter.png');
                        background-size: 100% auto;
                        background-repeat: no-repeat;
                        background-position: center center;
                        padding-bottom: 56%;">
            </div>
        </div>
    </div>
    Test case:
    Code:
    new Ext.widget({
        xtype: 'tabpanel',
        plugins: 'viewport',
        renderTo: Ext.getBody(),
        defaults: {
            scrollable: 'y',
            html: '<div><div style="width: 800px; max-width: 100%;"><div style="background-image: url(\'http://cdn.greendrake.info/xfile/content-wzit/xs/adapter.png\'); background-size: 100% auto;background-repeat: no-repeat;background-position: center center; padding-bottom: 56%;"></div></div></div>'
        },
        items: [
            {
                title: 'Container',
                xtype: 'container'
            },
            {
                title: 'Box',
                xtype: 'box'
            }                
        ]
    });
    Live example: http://greendrake.info/contvsbox/index.html

    Expected behavior:
    When the viewport width goes down below the displayed image width, the image should shrink to fit into the new width (i.e. behave responsively) on both the Container and Box tabs.

    Actual behavior:
    On the Box tab, the image is not responsive.

    Steps to reproduce:
    Open the live example on an Android device with small screen (e.g. a smart phone, not a tablet). See that the image width fits in the viewport. Click on the "Box" tab. See that the image does not fit in.

    The issue is found to be occurring on/in:
    • Ext JS 6.0.0.640, Classic toolkit, Neptune Touch theme
    • Galaxy S4, Android 4.4.2, both Chrome and Android "Internet" browsers.
    Know the actual implications of using GPL-licensed client-side JavaScript.

  2. #2
    Sencha - Support Team bjdurham85's Avatar
    Join Date
    Mar 2014
    Posts
    962

    Default

    Hi Greendrake,

    Thanks for the info, I've added this to our bug tracking system.


    Regards,
    Bryan

Similar Threads

  1. Replies: 2
    Last Post: 4 May 2015, 4:26 AM
  2. Replies: 2
    Last Post: 17 Jan 2010, 1:52 PM
  3. Replies: 3
    Last Post: 22 Sep 2009, 12:09 PM
  4. Placing "Dialog style" boxes inside a page, but not a popup
    By smijw in forum Ext 1.x: Help & Discussion
    Replies: 0
    Last Post: 4 Nov 2007, 2:36 PM

Posting Permissions

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