Titanium JIRA Archive
Appcelerator Community (AC)

[AC-4787] iOS Button textAlign is wrong way round

GitHub Issuen/a
TypeBug
Priorityn/a
StatusResolved
ResolutionNot Our Bug
Resolution Date2017-02-12T17:26:59.000+0000
Affected Version/sn/a
Fix Version/sn/a
ComponentsTitanium SDK & CLI
Labelsios
ReporterLawrence Wilson
AssigneeShak Hossain
Created2017-02-12T12:27:01.000+0000
Updated2017-02-13T08:21:59.000+0000

Description

The textAlign property for a button on iOS seems to behave the wrong way around: 
var button = Ti.UI.createButton({
      width: Ti.UI.SIZE
    , height: '30dp'
    , text: 'Update status'
    , textAlign: Ti.UI.TEXT_ALIGNMENT_LEFT // or 'left'
    , backgroundColor: '#DCB5FF'
});
Causes image attached. If the textAlign is set to right, then it justifies to left

Attachments

FileDateSize
Button_LEFT.png2017-02-13T08:21:48.000+000010056
Label_LEFT.png2017-02-13T08:21:48.000+000010131
Screen Shot 2017-02-12 at 12.24.54.png2017-02-12T12:25:11.000+000011818

Comments

  1. Hans Knöchel 2017-02-12

    You should always specify a width when setting the text-alignment for buttons. Working example: 
       var win = Ti.UI.createWindow({
       backgroundColor: '#fff'
   });
   
   
   var button = Ti.UI.createButton({
       height: 30,
       width: 300,
       title: 'Update status',
       textAlign: Ti.UI.TEXT_ALIGNMENT_LEFT,
       backgroundColor: '#DCB5FF'
   });
   
   win.add(button);
   win.open();
    The reason is that the text-alignments also specifes a button inset. So using left produces the insets {left: 10, right: 0} and right produces {right: 10, left: 0}. So when you use, the left insets are 10 and the right are 0, but because you don't specify a fixed width, it auto-sizes and results in this behavior.
  2. Lawrence Wilson 2017-02-13

    So this is different to the way a label works then as the label adds no insets and justifies correctly. I have added two more images to show this: * Button_LEFT - using a button with text align left * Label_LEFT - using a label with text align left Any idea why the button adds an inset?

JSON Source