PDA

View Full Version : Button Text Wrap



ChiefDanGeorge
20 Apr 2012, 5:11 AM
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
20 Apr 2012, 11:25 PM
Try this


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

khmurach
21 Apr 2012, 1:38 AM
Demo here http://ext4all.com/post/button-text-wrap

ChiefDanGeorge
21 Apr 2012, 2:55 AM
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
23 Apr 2012, 4:03 AM
That didn't seem to work for me.

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

khmurach
26 Apr 2012, 12:43 AM
My Demo? In which browser?

ChiefDanGeorge
26 Apr 2012, 4:12 AM
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?