PDA

View Full Version : How to adjust Ext.tab.TabPanel tab spacing



mrtedweb
7 Jul 2013, 8:55 AM
Does anyone know how to adjust (or remove) the spacing between tabs in a tab panel? I've been digging through Firebug and can't find the right css class to adjust. I'm using ExtJS 4.2.

slemmon
8 Jul 2013, 10:13 PM
You can use the tabConfig option to set the margin. The tabConfig option is described at the top of the tabPanel's API doc.
http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.tab.Panel

Example:


Ext.create('Ext.tab.Panel', {
width: 400,
height: 400,
renderTo: document.body,
items: [{
title: 'Foo'
}, {
title: 'Bar',
tabConfig: {
title: 'Custom Title',
tooltip: 'A button tooltip',
margin: '0 0 0 -15'
}
}]
});

Mr. Blonde
8 Jan 2016, 5:54 AM
Other way to do it is with a mixin param;


@include extjs-tab-ui(
$ui: 'your-ui-tab',
$ui-margin: 0, // your value to the margins
);


If you are building a new theme for the implementation is the best way.