Touch version tested: Browser versions or Packager version tested against: Device and OS tested against:

  • MacBook Pro / OS X Mavericks


What theme are you using for your application: Description:

  • I have two items in a vertically scrollable view. The first is a container with simple html output. The second underneath is a button with a long label that exceeds the views width. If I don't set the scrollable config on the parent view, the button label is correctly cut off with the ellipsis. I want to allow vertical scrolling since the html output might exceed the views height. If I set the scrollable config (even scrollable: false results in this problem) the button label won't get cut off.


Steps to reproduce the problem: The url to fiddle testcase:

http://ift.tt/1ijMjl9

Code:



Ext.application({
    name : 'Fiddle',


    launch : function() {
        
        var view = Ext.create('Ext.Container', {
            layout: 'vbox',
            /*scrollable: {
                 direction: 'vertical',
                 directionLock: true
            },*/
            items: [
                {
                    html: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
                    styleHtmlContent: true
                },
                {
                    xtype: 'button',
                    text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
                    margin: '0 15px'
                }
            ]
        });
        
        Ext.Viewport.add(view);
    }
});