Aligning text and icons in button

[diesalher]

Hi, i need some advice to solve my problem

I need for my application buttons with icons and text, so far i have

 {
xtype:'button',
iconMask:'true',
iconAlign:'top',
ui:'light'
iconCls:'maps',
ui:'black',
text:'Locate hotspot',
,cls:'transparentbutton'
},

which render the icon and the text just below.

¿How can i change the size of the text without changing the size of the icon?
If in my css i change the font-size property to 0.7em, it makes the icon smaller too.

¿How can i align the text of the button to the bottom of the button?
Now the text allways shows just below the icon

¿How can i break the text in a button in multiple lines?
So "Locate Hotspot" shows with a line break.

I dont know if the best way to do this is via css or sencha templating, but for now i'm not able to template my buttons the way i like. I was thinking of using a standard panel with an image and text (html template) and then try to capture the onclick on the panel, but the sencha touch documentation doesn't shows a tap ot click event in a panel

¿Some advice?

[rdougan]

¿How can i change the size of the text without changing the size of the icon?
If in my css i change the font-size property to 0.7em, it makes the icon smaller too.

Ensure you are targeting .x-button-label when setting the font-size.

¿How can i align the text of the button to the bottom of the button?
Now the text allways shows just below the icon

You will need to manually adjust the CSS for this. I suggest you inspect it using Web Inspector and work from there.

¿How can i break the text in a button in multiple lines?
So "Locate Hotspot" shows with a line break.

Set the 'text' of the button to "Locate<br />Hotspot".

[diesalher]

Ensure you are targeting .x-button-label when setting the font-size.

Thanks, it's working now.

You will need to manually adjust the CSS for this. I suggest you inspect it using Web Inspector and work from there.
.

This is a great advice to someone who is pretty new to web development. Web Inspector helped me a lot to see the hierarchy in the web page Sencha is generating. I fine tuned my css to get the desired result.

Set the 'text' of the button to "Locate<br />Hotspot".

This is not working for me. The text is showing "Locate<br />Hotspot" without line feed

[diesalher]

This is not working for me. The text is showing "Locate<br />Hotspot" without line feed

Ok, works now.

The trick is overriding the css property
white-space:nowrap
with
white-space:normal

and keeping the text without </br> (the text is insede an span in the button).