[TIMOB-16512] Android: Expose properties/methods for controlling internal padding in TextField (and possibly TextArea)

GitHub Issue	n/a
Type	New Feature
Priority	Low
Status	Closed
Resolution	Fixed
Resolution Date	2016-06-27T07:12:40.000+0000
Affected Version/s	Release 3.2.1
Fix Version/s	Release 6.0.0
Components	Android
Labels	internalmargin, padding, textfield
Reporter	Brian Burgess
Assignee	Ashraf Abu
Created	2014-02-22T04:42:16.000+0000
Updated	2016-11-16T19:21:28.000+0000

Description

sometimes, particularly with smaller screen devices, and/or with short fields (like intended only for 1 or 2 characters), the text can get chopped off unexpectedly on either the top, right or the bottom. This seems to be because the internal 'padding' or margins are NOT scaled according to screen size.

Comments

Ritu Agrawal 2014-02-24

TextField supports multiple padding properties (for example, paddingLeft and paddingRight) for iOS platform. Are you looking for the same properties on Android platform? Please confirm. http://docs.appcelerator.com/titanium/latest/#!/api/Titanium.UI.TextField-property-paddingLeft
Brian Burgess 2014-02-25

Yes Ritu, This is correct. These Ti.UI.TextField properties have no effect on Android. However they are available in native Android (JAVA). I'm just looking to have them 'exposed' to android in Ti. Much Thx
Ritu Agrawal 2014-02-26

Moving this enhancement request to engineering. It would bring Android platform to parity with iOS platform.

Biju pm 2014-04-02

Test case :

    var win = Ti.UI.createWindow({
       backgroundColor:'white'
   });
   var txt = Titanium.UI.createTextField({
       value:'this is a textfield',
       height:35,
       width: 300,
       top:60,
       paddingLeft:10,     // pad left by 10 pixels
   }); 
    
   var textArea = Ti.UI.createTextArea({
   	textAlign : 'right' ,
   	  paddingRight : 10,     // pad right by 10 pixels
   	  value: 'this is a textarea',
   	  top: 120,
   	  width: 300, height : 70
   	});
   var btn = Ti.UI.createButton({
   	height:135, width : 250, top : 200,
       title : 'Set Padding'
   });
   win.add(btn);
   win.add(textArea);
   	
   win.add(txt);
   btn.addEventListener('click',function(e)
   		{
   	textArea.setPaddingRight(50);
   	txt.setPaddingLeft(50);
   		});
    
   win.open();

Biju pm 2014-04-02

PR :- https://github.com/appcelerator/titanium_mobile/pull/5492

Biju pm 2014-05-01

   var win = Ti.UI.createWindow({
   	backgroundColor:'white'
   });
   var txt = Titanium.UI.createTextField({
   	value:'this is a textfield',
   	paddingTop:2,
   	height:150,
   	width: 300,
   	top:60,
   	paddingLeft:10,     // pad left by 10 pixels
   }); 
   
   var textArea = Ti.UI.createTextArea({
   	textAlign : 'right' ,
   	paddingRight : 10,     // pad right by 10 pixels
   	value: 'this is a textarea',
   	top: 250,
   	width: 350, height : 70
   });
   var btn = Ti.UI.createButton({
   	height:100, width : 250,
   	top : 320,
   	title : 'Set Padding'
   });
   win.add(btn);
   win.add(textArea);
   
   win.add(txt);
   btn.addEventListener('click',function(e)
   		{
   	textArea.setPaddingRight(50);
   	txt.setPaddingLeft(50);
   	textArea.paddingBottom = 15 ;
   	txt.paddingTop = 10 ;
   		});
   
   win.open();

ian young 2014-09-09

Not sure why this is a low priority issue, or are all Android bugs/features low priority? I'd love to develop purely for iOS, but unfortunately there are plenty of titanium developers out here that have no choice but to develop for both (the reason they chose Titanium in the first place). Would be nice if you guys at Appcelerator acknowledged this at some point.
Lev 2014-11-10

Please expose those properties to avoid behavior, mentioned in TC-4536.
Lev 2014-11-27

Found workaround, using styles:
ian young 2014-11-27

Any workaround for a classic App?
Lev 2014-11-27

Yes, this is for classic app. Solved a lot of crappy problems at once with that. Refer to http://docs.appcelerator.com/titanium/3.0/#!/guide/Android_Themes for details.
ian young 2014-11-27

Awesome, thanks!

Michael Gangolf 2016-04-02

I've updated the PR: https://github.com/appcelerator/titanium_mobile/pull/7908 !http://www.migaweb.de/ti_padding.png!

    var win = $.UI.create("Window", {
        layout: "vertical",
        backgroundColor: "#fff"
    });
    
    var t1 = $.UI.create("TextField", {
        value: "lllllllllmmmmmmmmmmmmmmlllllllllll",
        padding: {
            left: 20,
            right: 0
        },
        width: 100,
        height: Ti.UI.SIZE,
        borderColor: "#000",
        color: "#000",
        borderWidth: 1,
        top: 10
    });
    
    var t2 = $.UI.create("TextField", {
        value: "lllllllllmmmmmmmmmmmmmmlllllllllll",
        padding: {
            right: 20,
            left: 0
        },
        width: 100,
        height: Ti.UI.SIZE,
        borderColor: "#000",
        color: "#000",
        borderWidth: 1,
        top: 10
    });
    
    var t3 = $.UI.create("TextField", {
        value: "lllllllllmmmmmmmmmmmmmmlllllllllll",
        padding: {
            left: 20,
            right: 20
        },
        width: 100,
        height: Ti.UI.SIZE,
        borderColor: "#000",
        color: "#000",
        borderWidth: 1,
        top: 10
    });
    
    var t4 = $.UI.create("TextField", {
        value: "lllllllllmmmmmmmmmmmmmmlllllllllll",
        padding: {
            left: 20,
            right: 20
        },
        width: 100,
        height: 100,
        borderColor: "#000",
        color: "#000",
        borderWidth: 1,
        top: 10
    });
    
    
    win.add(t1);
    win.add(t2);
    win.add(t3);
    win.add(t4);
    
    win.open();

Michael Gangolf 2016-04-16

changing to hashmap padding: {left:0,right:0}
Ashraf Abu 2016-05-19

Will merge this once we are ready for 6.0.0.
Hieu Pham 2016-05-25

[~michael], I've left a few comments in the PR, please address them. Thanks!
Michael Gangolf 2016-05-25

Hieu Pham, should all be fixed now
Hieu Pham 2016-05-25

Thanks, looks good man!
Ashraf Abu 2016-06-27

PR https://github.com/appcelerator/titanium_mobile/pull/7908 merged.
Lokesh Choudhary 2016-08-22

Verified the implementation. Closing. Environment: Appc Studio : 4.7.1.201608190732 Ti SDK : 6.0.0.v20160822001523 Ti CLI : 5.0.9 Alloy : 1.9.1 MAC El Capitan : 10.11.6 Appc NPM : 4.2.7 Appc CLI : 6.0.0-26 Node: 4.4.4 Nexus 6 - Android 6.0.1

JSON Source