Customer is using textfields and a button to create a simple form in their project and after they focus on any of the textfield elements the button shifts the title align from center to left.
Tested and reproduce by customer in HTC Ruby with Android 4.0.3 and
After testing we have found this behavior appears to be be present on Android versions under 4.3
Test and reproduced by support at:
Sony LT 22i
Android 4.1.2
While testing this issue is not reproducible with devices:
Samsung Galaxy S4
Android 4.3
Nexus 7
Android 4.4
var OF = {};
OF.apply = function(ro, so, defaults){
if(defaults){
OF.apply(ro, defaults);
}
if(ro && so && typeof so == 'object'){
for(var i in so){
ro[i] = so[i];
}
}
return ro;
};
OF.combine = function(obj, props){
var newObj = {};
OF.apply(newObj, obj);
return OF.apply(newObj, props);
};
var TEXT_FIELD_HEIGHT = 50,
FONT_FAMILY = 'Roboto-Regular',
$ = {horizontalSpacing : 10},
$$ = {
bgColor : '#E9E9E9',
horizontalSpacing : $.horizontalSpacing,
actionBtn : {
backgroundImage : "/images/action_button_slice.png",
title : 'Action',
font : {
fontFamily : FONT_FAMILY,
fontSize : 20,
fontWeight : 'bold',
verticalAlign : 'center',
color : 'black'
},
textAlign : 'center',
color : 'black',
top : $.horizontalSpacing,
width: 294,
height : 57
}
};
var create_login_window = function(window){
var popupView = Ti.UI.createView({
backgroundImage: '/images/loginBG_bottom.png',
opacity : 1.0,
top : 0, bottom : 0,
left : 0, right : 0,
layout : 'vertical'
});
var scrollView = Titanium.UI.createScrollView({
backgroundColor : $$.bgColor,
backgroundImage : '/images/loginBG_bottom.png',
top:0, bottom : 0,
showVerticalScrollIndicator:false,
showHorizontalScrollIndicator:false
});
scrollView.add(popupView);
window.add(scrollView);
var popupViewTop = Titanium.UI.createView({
backgroundImage: null,
backgroundColor : 'white',
opacity : 1.0,
top : 0,
height : 175,
width : Ti.UI.FILL
});
popupView.add(popupViewTop);
var logoImageView = Ti.UI.createImageView({
image : '/images/login_logo.png',
width : 269,
height : 104,
});
popupViewTop.add(logoImageView);
var popupViewBottom = Titanium.UI.createView({
backgroundImage: '/images/android_login_bottom_slice.9.png',
opacity : 1.0,
top : 0,
height : Ti.UI.FILL,
width : Ti.UI.FILL,
layout : 'vertical'
});
popupView.add(popupViewBottom);
var usernameText = Ti.UI.createTextField({
autocapitalization : Titanium.UI.TEXT_AUTOCAPITALIZATION_NONE,
borderStyle : Titanium.UI.INPUT_BORDERSTYLE_ROUNDED,
font:{
fontFamily : FONT_FAMILY,
fontSize : 14
},
color : '#808080',
borderWidth : 1,
borderRadius : 5,
bubbleParent : false,
hintText : 'Enter username',
value : '',
autocorrect : false,
clearOnEdit : false,
returnKeyType: Titanium.UI.RETURNKEY_DONE,
top : 0,
left : $$.horizontalSpacing,
right : $$.horizontalSpacing,
height : TEXT_FIELD_HEIGHT
});
popupViewBottom.add(usernameText);
var passwordText = Ti.UI.createTextField({
autocapitalization : Titanium.UI.TEXT_AUTOCAPITALIZATION_NONE,
borderStyle : Titanium.UI.INPUT_BORDERSTYLE_ROUNDED,
font:{
fontFamily : FONT_FAMILY,
fontSize : 14
},
color : '#808080',
borderWidth : 1,
bubbleParent : false,
borderRadius : 5,
hintText : 'Enter password',
value : '',
clearOnEdit : true,
top : $$.horizontalSpacing/2,
left : $$.horizontalSpacing,
right : $$.horizontalSpacing,
returnKeyType : Titanium.UI.RETURNKEY_DONE,
height : TEXT_FIELD_HEIGHT,
passwordMask : false
});
popupViewBottom.add(passwordText);
var server = Ti.UI.createTextField({
autocapitalization:Titanium.UI.TEXT_AUTOCAPITALIZATION_NONE,
borderStyle:Titanium.UI.INPUT_BORDERSTYLE_ROUNDED,
font : {
fontFamily : FONT_FAMILY,
fontSize : 14
},
color : '#808080',
borderWidth: 1,
bubbleParent : false,
borderRadius: 5,
hintText : 'Enter servername',
value:'',
clearOnEdit: false,
top : 0,
left : $$.horizontalSpacing,
right : $$.horizontalSpacing,
autocorrect : false,
returnKeyType: Titanium.UI.RETURNKEY_DONE,
height : TEXT_FIELD_HEIGHT
});
popupViewBottom.add(server);
passwordText.addEventListener('focus', function() {
passwordText.passwordMask = true;
});
var loginButton = Ti.UI.createButton(OF.combine($$.actionBtn, {
backgroundImage : null,
title : 'Sign In',
left : $$.horizontalSpacing,
right : $$.horizontalSpacing,
width : null,
textAlign : Ti.UI.TEXT_ALIGNMENT_CENTER,
top : 10
}));
popupViewBottom.add(loginButton);
};
var win = Ti.UI.createWindow({
backgroundColor : '#fff',
title :'test'
});
create_login_window(win);
win.open();
1. Run the test case
2. Focus on a textfield
3. Close the keyboard
After this the button title will be aligned to the left.
Seems to be a layout issue where implicit FILL behavior is causing issues on some devices. Might very well be a device specific issue. The workaround posted below worked for me on HTC EVO running 4.0.3 (Using Explicit FILL behavior for WIDTH and HEIGHT on Button)
var btnWrapper = Ti.UI.createView({ left: $$.horizontalSpacing, right: $$.horizontalSpacing, top: 10, height :$$.actionBtn.height }); var loginButton = Ti.UI.createButton(OF.combine($$.actionBtn, { backgroundImage : null, title : 'Sign In', top:0, width : Ti.UI.FILL, height: Ti.UI.FILL, textAlign : Ti.UI.TEXT_ALIGNMENT_CENTER, })); btnWrapper.add(loginButton); popupViewBottom.add(btnWrapper);We do not control the rendering of the button. The fact that the title is not center aligned after a **postlayout** seems to be a native platform issue on certain devices. We actually layout the button correctly based on the positioning parameters. Resolving this as NOT OUR BUG. Possible JS workaround in comments
Closing ticket as the issue here is not our bug.