PDA

View Full Version : How can I stop Ext adding padding to top of text in Button?



Jangla
23 Apr 2013, 7:00 AM
See screenshot attached. These buttons have their text derived from a tpl so I can have some nicer styling.

Problem is, when there is one line of secondary text, the alignment is different to when there's two lines.

Looking at the CSS, it seems that Ext has added an additional 20px to the padding-top delcaration - is there a way of stopping it from doing this so the blue text all lines up nicely?

Arg0n
23 Apr 2013, 7:09 AM
Some code would be great =D

Jangla
23 Apr 2013, 8:26 AM
Sorry - bad form, I know! It's a strange use-case so I'm not going to give you everything, but this is what's creating the actual buttons:



buttonDefaults : {
allowToggle : true,
toggleGroup : this.id + '-toggle-group',
cls : 'my-picker-btn',
scale : 'large',
iconAlign : 'top',
margin : '0 10 0 0',
flex : 1
}


....


Ext.apply( {}, {
xtype : 'button',
icon : 'path/to/icon/file.png,
text : record.data.buttonTemplate, // this a simple Ext Template that defines the button text with some wrappers for styling
listeners : {
click : {
fn : me.onSetValue,
scope : me
}
}
}, me.buttonDefaults )



The template is as simple as:




me.buttonTpl = Ext.create( 'Ext.Template', '<div class="{wrapperCls}"><div class="{headlineCls}">{headline}</div><div class="{bylineCls}">{byline}</div></div>', {compiled : true} );



So the CSS that goes with it can just style the headline and byline. There's nothing in the CSS for those in terms of position; just font size, color, white space and line-height.

Arg0n
23 Apr 2013, 11:33 AM
Try to use the 'html' config instead of the 'text' config.


html: record.data.buttonTemplate

Jangla
23 Apr 2013, 12:12 PM
Unfortunately this doesn't solve the problem - exact same padding-top added by ext. It's like it's trying to align all the text at some baseline across the bottom of the buttons. This may be fine for some (people who will only ever have a single line of text) but not for my use case.

Arg0n
23 Apr 2013, 12:19 PM
Ah, maybe I know whats wrong =D

Could you give the button:


border: 5

as config and show the result =)

Jangla
30 Apr 2013, 8:31 AM
Ah, maybe I know whats wrong =D

Could you give the button:


border: 5

as config and show the result =)

That renders the exact same thing but the button have a 5px border. Sorry, but I'm not sure how this would have changed the internal markup of the button or the arbitrary padding Ext is adding :-/

Jangla
17 May 2013, 5:19 AM
bump