[4.0.0] enableOverflow and scale: 'large' and groups

[DHainzl]

Ext version tested:

• Ext 4.0.0

Browser versions tested against:

• FF4

Operating System:

• Win7

Description:

• I have a Ext.panel.Panel with a tbar applied to it. The tbar has scale set to 'large' and enableOverflow: true.
  It has three buttongroups as children.
  When resizing the container, the overflow arrow isn't shown - the container div is too small to display it (discovered with Firebug)

Test Case:

 Ext.require([
    'Ext.panel.*',
    'Ext.toolbar.*',
    'Ext.button.*',
    'Ext.container.ButtonGroup',
    'Ext.layout.container.Table'
]);

Ext.onReady(function() {
    var fakeHTML = "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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.";
    
    var SamplePanel = Ext.extend(Ext.Panel, {
        width    : 350,
        height   : 250,
        style    : 'margin-top:15px',
        bodyStyle: 'padding:10px',
        renderTo : Ext.getBody(),
        html     : fakeHTML,
        autoScroll: true,
		resizable: true
    });
    
    new SamplePanel({
        title: 'Standard',
        tbar: new Ext.toolbar.Toolbar (
		{
			enableOverflow: true,
			items:
			[
				{
					xtype:'splitbutton',
					text: 'Menu Button',
					iconCls: 'add16',
					menu: [{text: 'Menu Button 1'}]
				},'-',{
					xtype:'splitbutton',
					text: 'Cut',
					iconCls: 'add16',
					menu: [{text: 'Cut Menu Item'}]
				},{
					text: 'Copy',
					iconCls: 'add16'
				},{
					text: 'Paste',
					iconCls: 'add16',
					menu: [{text: 'Paste Menu Item'}]
				},'-',{
					text: 'Format',
					iconCls: 'add16'
				}
			]
		})
    });

    new SamplePanel({
        title: 'Multi columns',
        tbar: new Ext.toolbar.Toolbar (
		{
			enableOverflow: true,
			items:
			[
				{
					xtype: 'buttongroup',
					title: 'Clipboard',
					columns: 2,
					defaults: 
					{
						scale: 'small'
					},
					items: 
					[
						{
							xtype:'splitbutton',
							text: 'Menu Button',
							iconCls: 'add16',
							menu: [{text: 'Menu Item 1'}]
						},
						{
							xtype:'splitbutton',
							text: 'Cut',
							iconCls: 'add16',
							menu: [{text: 'Cut Menu Item'}]
						},
						{
							text: 'Copy',
							iconCls: 'add16'
						},
						{
							text: 'Paste',
							iconCls: 'add16',
							menu: [{text: 'Paste Menu Item'}]
						},
						{
							text: 'Format',
							iconCls: 'add16'
						}
					]
				},
				{
					xtype: 'buttongroup',
					title: 'Other Bogus Actions',
					columns: 2,
					defaults: 
					{
						scale: 'small'
					},
					items: 
					[
						{
							xtype:'splitbutton',
							text: 'Menu Button',
							iconCls: 'add16',
							menu: [{text: 'Menu Button 1'}]
						},
						{
							xtype:'splitbutton',
							text: 'Cut',
							iconCls: 'add16',
							menu: [{text: 'Cut Menu Item'}]
						},
						{
							text: 'Copy',
							iconCls: 'add16'
						},
						{
							text: 'Paste',
							iconCls: 'add16',
							menu: [{text: 'Paste Menu Item'}]
						},
						{
							text: 'Format',
							iconCls: 'add16'
						}
					]
				}
			]
		})
    });
    
    new SamplePanel({
        title: 'Multi columns (No titles, double stack)',
		tbar: new Ext.toolbar.Toolbar (
		{
			enableOverflow: true,
			items: 
			[
				{
					xtype: 'buttongroup',
					columns: 3,
					defaults: 
					{
						scale: 'small'
					},
					items: 
					[
						{
							xtype:'splitbutton',
							text: 'Menu Button',
							iconCls: 'add16',
							menu: [{text: 'Menu Item 1'}]
						},
						{
							xtype:'splitbutton',
							text: 'Cut',
							iconCls: 'add16',
							menu: [{text: 'Cut Menu Item'}]
						},
						{
							text: 'Copy',
							iconCls: 'add16'
						},
						{
							text: 'Paste',
							iconCls: 'add16',
							menu: [{text: 'Paste Menu Item'}]
						},
						{
							text: 'Format',
							iconCls: 'add16'
						}
					]
				},
				{
					xtype: 'buttongroup',
					columns: 3,
					defaults: 
					{
						scale: 'small'
					},
					items: 
					[
						{
							xtype:'splitbutton',
							text: 'Menu Button',
							iconCls: 'add16',
							menu: [{text: 'Menu Item 1'}]
						},{
							xtype:'splitbutton',
							text: 'Cut',
							iconCls: 'add16',
							menu: [{text: 'Cut Menu Item'}]
						},{
							text: 'Copy',
							iconCls: 'add16'
						},{
							text: 'Paste',
							iconCls: 'add16',
							menu: [{text: 'Paste Menu Item'}]
						},{
							text: 'Format',
							iconCls: 'add16'
						}
					]
				}
			]
		})
    });
    
    new SamplePanel({
        title: 'Mix and match icon sizes to create a huge unusable toolbar',
		tbar: new Ext.toolbar.Toolbar (
		{
			enableOverflow: true,
			items:
			[
				{
					xtype: 'buttongroup',
					columns: 3,
					title: 'Clipboard',
					items: 
					[
						{
							text: 'Paste',
							scale: 'large',
							rowspan: 3, iconCls: 'add',
							iconAlign: 'top',
							cls: 'x-btn-as-arrow'
						},
						{
							xtype:'splitbutton',
							text: 'Menu Button',
							scale: 'large',
							rowspan: 3,
							iconCls: 'add',
							iconAlign: 'top',
							arrowAlign:'bottom',
							menu: [{text: 'Menu Item 1'}]
						},
						{
							xtype:'splitbutton', text: 'Cut', iconCls: 'add16', menu: [{text: 'Cut Menu Item'}]
						},
						{
							text: 'Copy', iconCls: 'add16'
						},
						{
							text: 'Format', iconCls: 'add16'
						}
					]
				},
				{
					xtype: 'buttongroup',
					columns: 3,
					title: 'Other Actions',
					items: 
					[
						{
							text: 'Paste',
							scale: 'large',
							rowspan: 3, iconCls: 'add',
							iconAlign: 'top',
							cls: 'x-btn-as-arrow'
						},
						{
							xtype:'splitbutton',
							text: 'Menu Button',
							scale: 'large',
							rowspan: 3,
							iconCls: 'add',
							iconAlign: 'top',
							arrowAlign:'bottom',
							menu: [{text: 'Menu Button 1'}]
						},
						{
							xtype:'splitbutton', text: 'Cut', iconCls: 'add16', menu: [{text: 'Cut Menu Item'}]
						},
						{
							text: 'Copy', iconCls: 'add16'
						},
						{
							text: 'Format', iconCls: 'add16'
						}
					]
				}
			]
		})
    });
    
    new SamplePanel({
        title: 'Medium icons, arrows to the bottom',
		tbar: new Ext.toolbar.Toolbar (
		{
			enableOverflow: true,
			items: [{
				xtype: 'buttongroup',
				title: 'Clipboard',
				defaults: {
					scale: 'medium',
					iconAlign:'top'
				},
				items: [{
					xtype:'splitbutton',
					text: 'Menu Button',
					iconCls: 'add24',
					arrowAlign:'bottom',
					menu: [{text: 'Menu Item 1'}]
				},{
					xtype:'splitbutton',
					text: 'Cut',
					iconCls: 'add24',
					arrowAlign:'bottom',
					menu: [{text: 'Cut Menu Item'}]
				},{
					text: 'Copy',
					iconCls: 'add24',
					cls: 'x-btn-as-arrow'
				},{
					text: 'Paste',
					iconCls: 'add24',
					arrowAlign:'bottom',
					menu: [{text: 'Paste Menu Item'}]
				},{
					text: 'Format<br/>Stuff',
					iconCls: 'add24'
				}]
			},{
				xtype: 'buttongroup',
				title: 'Other Bogus Actions',
				defaults: {
					scale: 'medium',
					iconAlign:'top'
				},
				items: [{
					xtype:'splitbutton',
					text: 'Menu Button',
					iconCls: 'add24',
					arrowAlign:'bottom',
					menu: [{text: 'Menu Item 1'}]
				},{
					xtype:'splitbutton',
					text: 'Cut',
					iconCls: 'add24',
					arrowAlign:'bottom',
					menu: [{text: 'Cut Menu Item'}]
				},{
					text: 'Copy',
					iconCls: 'add24',
					cls: 'x-btn-as-arrow'
				},{
					text: 'Paste',
					iconCls: 'add24',
					arrowAlign:'bottom',
					menu: [{text: 'Paste Menu Item'}]
				},{
					text: 'Format',
					iconCls: 'add24',
					cls: 'x-btn-as-arrow'
				}]
			}]
		})
    });
    
    
    new SamplePanel({
        title: 'Medium icons, text and arrows to the left',
		width: 230,
		tbar: new Ext.toolbar.Toolbar (
		{
			enableOverflow: true,
			items: [{
				xtype:'buttongroup',
				items: [{
					text: 'Cut',
					iconCls: 'add24',
					scale: 'medium'
				},{
					text: 'Copy',
					iconCls: 'add24',
					scale: 'medium'
				},{
					text: 'Paste',
					iconCls: 'add24',
					scale: 'medium',
					menu: [{text: 'Paste Menu Item'}]
				}]
			}, {
				xtype:'buttongroup',
				items: [{
					text: 'Format',
					iconCls: 'add24',
					scale: 'medium'
				}]
			}]
		})
    });
    
    new SamplePanel({
        title: 'Small icons, text and arrows to the left',
		width: 220,
		tbar: new Ext.toolbar.Toolbar (
		{
			enableOverflow: true,
			items: [{
				xtype:'buttongroup',
				items: [{
					text: 'Cut',
					iconCls: 'add16',
					scale: 'small'
				},{
					text: 'Copy',
					iconCls: 'add16',
					scale: 'small'
				},{
					text: 'Paste',
					iconCls: 'add16',
					scale: 'small',
					menu: [{text: 'Paste Menu Item'}]
				}]
			}, {
				xtype:'buttongroup',
				items: [{
					text: 'Format',
					iconCls: 'add16',
					scale: 'small'
				}]
			}]
		})
    });
});

This code modifies the Toolbars-Example so that the panels are smaller and resizable and their toolbars have enableOverflow set to true. Debugging already done:

• It seems that the container for the button has a height of 16px and is aligned to the top of the toolbar panel, while the button itself is aligned at the center and therefore not viewable.

[DHainzl]

This problem still persists with 4.0.2 - Even further, if you use the gray theme, the toolbar groups have a blue color (instead of a gray one). This is nicely reproducable if you just take the above example and change the style from ext-all.css to ext-all-gray.css.

[bodyboarder20]

This problem exists in 4.0.2a as well. I also noticed that I can click the button (albeit - you can't see the image) once, but after that, if I click it again, I receive DOM errors....

I'll see if I can come up w/ a fix for this...

[fabiovilas]

in 4.0.2 don´ t work...

[wildfire]

This CSS fix worked for me with scale:'medium'

#toolbar .x-box-menu-right {
    overflow: visible;
}


#toolbar .x-box-menu-right .x-btn {
    height:32px!important;
    width: 32px!important;
    padding: 3px!important;
    top:2px!important;
}


#toolbar .x-box-menu-right .x-btn button {
    margin: 4px 0 0 4px;
}

Hope it helps in the short term.

Nick