Question

I purchase a theme from AppVaultDesign and it comes with a back button image that looks like this http://cl.ly/2h3x0j0p2v262k0k2U0e

However, when I add it to the code, the alignment looks wrong. The text is too close to the button. http://cl.ly/393s2D0f0v3P0m3H150O

When I tried to use textAlign: 'right', it looks like this http://cl.ly/0Z2d1Y0f3q1O100c0b3f No idea why is like that. Frustrating. It doesn’t goes up when I do textAlign: 'center' or textAlign: 'left'.

So here’s the code, I’m using. Any help?

var backButton = Ti.UI.createButton({
    backgroundImage: 'images/back.png',
    font: { fontSize: 13, fontWeight: 'bold' },
    height: 28,
    title: "Back",
    width: 51
});
backButton.addEventListener('click', function(){
    navGroup.close(self);
});
self.leftNavButton = backButton;

I think it should be an easy one. It just frustrating that I can’t get it working right. It will be much appreciated, if someone can post me the working code for the button and the image. That way, I can try to see where went wrong as well.

Many thanks, Mickey

Answer 1

The simplest way, probably, is to add a whitespace before " Back"

var backButton = Ti.UI.createButton({
    backgroundImage: 'images/back.png',
    font: { fontSize: 13, fontWeight: 'bold' },
    height: 28,
    title: " Back",
    width: 51
});