How to set the 'title' property width in a Button, is it possible?

When using the Button object with Left/Right Caps, I would like to set the max length of the 'title' property, so it will not go over the edge of my button, respecting my Left and Right Caps.

Some of the properties in the Label object are present in the Button, like 'textAlign', but probably there is no property like 'textWidth', right?

var btn = Ti.UI.createButton({
    backgroundImage:'images/btn.png',
    backgroundSelectedImage:'images/btn_selected.png',
    title:     titleVar,
    textAlign: 'left',    
    font: {fontSize:14, fontWeight:'bold'},    
    backgroundLeftCap: 2,
    backgroundRightCap: 33,
    height: 49,
    width:     270, 
    left:     207,
    top:     0,
    opacity: 1,
    zIndex:  1,
    style: Titanium.UI.iPhone.SystemButtonStyle.PLAIN
});
view.add(btn);

3 Answers

Here it is my new implementation, replacing Button with a View + Label.

var btn = Ti.UI.createView({
    backgroundImage:'images/btn_username.png',    
    backgroundLeftCap: 2,
    backgroundRightCap: 33,
    height: 49,
    width: 250,
    left: 207,
    top: 0,
    opacity: 1,
    zIndex: 1,
    style:Titanium.UI.iPhone.SystemButtonStyle.PLAIN
});
view.add(btn);

var titleLabel = Ti.UI.createLabel({
    color:         '#ffffff',
    text:          titleVar,
    font:         {fontSize:14, fontWeight:'bold'},
    textAlign:     'left',        
    top:         14,
    left:          12,
    height:     20,
    width:         204,
    opacity:     1,
    zIndex:     99    
});
btn.add(titleLabel);

// ================
// = Listeners    =
// ================

btn.addEventListener('touchend', function()    {
    btn.backgroundImage = 'images/btn_username.png';
});

// build User popover
btn.addEventListener('click', function()    {
    btn.backgroundImage = 'images/btn_username_selected.png';
});

not that I am aware of - you might be better off using a styled view in this case.
— answered December 6th 2010 by Kevin Whinnery
permalink

1 Comment
- Ok, I will implement this with a view instead of a Button.
  
  — commented December 6th 2010 by Antonio Silveira
0 Votes

Hey! you can also try this…!

var btn = Ti.UI.createButton({
    backgroundImage:'images/btn.png',
    backgroundSelectedImage:'images/btn_selected.png',
    title: titleVar.myTitle.substring(0,85),// this is for title width 
    textAlign: 'left',  
    font: {fontSize:14, fontWeight:'bold'}, 
    backgroundLeftCap: 2,
    backgroundRightCap: 33,
    height: 49,
    width:  270, 
    left:   207,
    top:    0,
    opacity: 1,
    zIndex:  1,
    style: Titanium.UI.iPhone.SystemButtonStyle.PLAIN
});

Titanium Community Questions & Answer Archive

We felt that 6+ years of knowledge should not die so this is the Titanium Community Questions & Answer Archive

How to set the 'title' property width in a Button, is it possible?

3 Answers