[TIMOB-16466] iOS: rightButton does not appear in TextField if padding is used

GitHub Issue	n/a
Type	Bug
Priority	Low
Status	Reopened
Resolution	Unresolved
Affected Version/s	Release 3.2.1
Fix Version/s	n/a
Components	iOS
Labels	iPhone
Reporter	Manojkumar Murugesan
Assignee	Unknown
Created	2014-02-01T10:44:04.000+0000
Updated	2018-02-28T20:04:19.000+0000

Description

The following code is not working. Only textfield is visible. Right button is not shown. View:

<TextField id="measurementTxt">
 <RightButton platform="ios">
  <Button id="measurementBtn" />
 </RightButton>
</TextField>

TSS:

"#measurementTxt[platform=ios]":{
	rightButtonMode: Ti.UI.INPUT_BUTTONMODE_ALWAYS
},
"#measurementBtn[platform=ios]":{
	backgroundImage:'images/add_row.png',
	systemButton: Ti.UI.iPhone.SystemButton.DONE
}

Titanium Test Case

var win = Ti.UI.createWindow({
  backgroundColor: 'white'
});
 
var done = Titanium.UI.createButton({
    title : 'Done',
    style : Titanium.UI.iPhone.SystemButtonStyle.DONE,
    width: 60,
    height: 60
});
 
var textField = Ti.UI.createTextField({
  color: '#336699',
  top: 50, left: 10,
  width: 250, height: 60,
  paddingLeft: 8.5, paddingRight: 8.5,  // Comment out this line to see the button in the text field
  borderStyle: Ti.UI.INPUT_BORDERSTYLE_LINE,
  rightButtonMode: Ti.UI.INPUT_BUTTONMODE_ALWAYS,
  borderWidth: 1, 
  rightButton: done
});
 
win.add(textField);
win.open();

Attachments

File	Date	Size
add_row.png	2014-02-09T16:17:51.000+0000	9614
iOS Simulator Screen shot Feb 9, 2014 5.45.39 PM.png	2014-02-09T16:17:51.000+0000	9594

Comments

Ritu Agrawal 2014-02-10

You need to set width and height properties of the button for the text field in order to display the button. It is documented here: http://docs.appcelerator.com/titanium/latest/#!/api/Titanium.UI.TextField-property-rightButton rightButton : Object Set the width and height properties of the button or else it does not display in the text field. Using an object other than a Button may have unpredictable results.

Manojkumar Murugesan 2014-02-13

I checked it myself just now with following code. It is not at all working for me. Could you please post your sample project here that I can download and check. Because I'm sure the below one is not working on my end. I'm on Ti 3.2.0 with Alloy 1.3.0 only. View

   <TextField id="measurementTxt">
    <RightButton platform="ios">
      <Button id="measurementBtn" />
    </RightButton>
   </TextField>

TSS

   "#measurementTxt[platform=ios]":{
       rightButtonMode: Ti.UI.INPUT_BUTTONMODE_ALWAYS
   },
   "#measurementBtn[platform=ios]":{
       image: "./images/add_row.png",
       width: "40dp",
       height: "40dp"
   }

Manojkumar Murugesan 2014-02-14

Hi, Thanks for sharing your sample code. It is working. *But it is not woking when I have paddingLeft & paddingRight properties set in my tss file.* I think this is a bug or if it is not supported by iOS itself it has to be documented. TSS

   ".container": {
   	backgroundColor:"#fff"
   },
   "Label": {
   	width: Ti.UI.SIZE,
   	height: Ti.UI.SIZE,
   	color: "#000"
   },
   "#measurementTxt[platform=ios]":{
   	top: "10dp",
   	paddingLeft: "8.5dp",
   	paddingRight: "8.5dp",
   	font: {
   		fontSize: "25dp"
   	},
   	textAlign: "left",
   	color: "#7badd2",
   	borderStyle: Ti.UI.INPUT_BORDERSTYLE_LINE,
   	autocorrect: false,
   	borderColor: "#7badd2",
       rightButtonMode: Ti.UI.INPUT_BUTTONMODE_ALWAYS,
       borderWidth: 1,
       width:Ti.UI.FILL,
       height: 50
   },
   "#measurementBtn[platform=ios]":{
       backgroundImage:'/images/add_row.png',
       systemButton: Ti.UI.iPhone.SystemButton.DONE,
       width:50,
       height: 50,
   }

Manojkumar Murugesan 2014-02-15

Any update on this?

Ritu Agrawal 2014-02-17

I can reproduce this issue with a Titanium test case so I am moving this ticket to engineering for further evaluation.

   var win = Ti.UI.createWindow({
     backgroundColor: 'white'
   });
   
   var done = Titanium.UI.createButton({
       title : 'Done',
       style : Titanium.UI.iPhone.SystemButtonStyle.DONE,
       width: 60,
       height: 60
   });
   
   var textField = Ti.UI.createTextField({
     color: '#336699',
     top: 50, left: 10,
     width: 250, height: 60,
     paddingLeft: 8.5, paddingRight: 8.5,  // Comment out this line to see the button in the text field
     borderStyle: Ti.UI.INPUT_BORDERSTYLE_LINE,
     rightButtonMode: Ti.UI.INPUT_BUTTONMODE_ALWAYS,
     borderWidth: 1, 
     rightButton: done
   });
   
   win.add(textField);
   win.open();

You can comment out the line with padding to make the button appear / disappear.

JSON Source