[AC-1578] iOS: Button border will not toggled

GitHub Issue	n/a
Type	Bug
Priority	n/a
Status	Closed
Resolution	Needs more info
Resolution Date	2015-08-12T06:59:45.000+0000
Affected Version/s	n/a
Fix Version/s	n/a
Components	n/a
Labels	n/a
Reporter	Ethan Chen
Assignee	Amimul Hossain
Created	2015-06-29T02:44:41.000+0000
Updated	2016-03-08T07:38:02.000+0000

Description

I want to toggle two different style of Button in between normal status or selected status with color, borderColor and backgroundColor, but I got a problem in switching borderColor on iOS, please check it out: TSS:

".normal": {
    color: '#FFFFFF',
    borderColor: '#8BD8D2',
    backgroundColor: '#000000'
}

".selected": {
    color: '#37A9AA',
    borderColor: '#FFFFFF',
    backgroundColor: '#FFFFFF'
}

JS:

if (selected) {
    $.resetClass(view, 'normal');
} else {
    $.resetClass(view, 'selected');
}

On iOS, changing the color and backgroundColor works fine but borderColor seems disappear. On Android, everything works fine.

Comments

Amimul Hossain 2015-06-30

Hello [~ethancfchen], The code you provided above has errors. For both "backgroundColor" and "borderColor" the value is same. So the color will be same in selected condition. Change the "borderColor" value to a different one in selected condition.

SAMPLE

   var self = Ti.UI.createWindow();
   
   var button = Titanium.UI.createButton({
   	title : 'Hello',
   	top : 100,
   	width : 400,
   	height : 200,
   	borderRadius: 40,
   	borderWidth : 10,
   	color : '#34847D',
   	borderColor : '#8D5F4B',
   	backgroundColor : '#818D4B'
   });
   
   button.addEventListener('click', function(e) {
   	button.color= '#000000';
       button.borderColor = '#D74E13';
       button.backgroundColor= '#FFFFFF';
   
   });
   self.add(button);
   self.open();

Thanks.

Ethan Chen 2015-06-30

I think it's not the problem, and I found it. If I set borderWidth to '2dp', the border will display on both styles.
Ethan Chen 2015-07-02

Any update here?
Amimul Hossain 2015-07-11

Hello, [~ethancfchen], Did you followed my instruction? I have checked with "borderWidth" to '2dp', It's the same result. If you are still facing the problem please follow my previous response. Provide "backgroundColor" and "borderColor" different value in selected condition. Also provide screenshots of the problem you view. Thanks.

JSON Source