Button Text Wrap

[ChiefDanGeorge]

I cannot get the text to line wrap in my buttons. My button definition is:


xtype: 'button',
width: 100,
height: 100,
text: "How Safe Is My Pesticide?",
margin: '0 20 0 20',
cls: 'pestPesticideSearchBtn',
listeners: {
scope: this,
click: function() {
this.mainTabPanel.setActiveTab('selectPesticidePage');
}
}



Where the css entry for pestPesticideSearchBtn is:


.pestPesticideSearchBtn .x-btn-inner {
white-space: normal;
}


The text will wrap if I change the text to: "<b>How Safe Is My Pesticide?</b>", however I want to move the
font weight into the css file as well. I'd appreciate any pointers!


Dan

[vietits]

Try this


.pestPesticideSearchBtn .x-btn-inner {
white-space:normal !important;
line-height:normal !important;
padding-top:32px;
}

[khmurach]

Demo here http://ext4all.com/post/button-text-wrap

[ChiefDanGeorge]

That seemed to fix the problem. The padding caused a bit of an issue on some other buttons using that class, however that's an easy fix. Thanks!

Try this


.pestPesticideSearchBtn .x-btn-inner {
white-space:normal !important;
line-height:normal !important;
padding-top:32px;
}

[ChiefDanGeorge]

That didn't seem to work for me.

Demo here http://ext4all.com/post/button-text-wrap

[khmurach]

My Demo? In which browser?

[ChiefDanGeorge]

Was using Firefox, latest version. It could be other CSS conflicts, although the !important on the suggestion above yours seemed to be important(no pun intended). The ExtJS stuff is inside of another generated template, not standing alone.


Dan

My Demo? In which browser?