Quantcast
Channel: Appcelerator Developer Center Q&A Tag Feed (keyboard)
Viewing all articles
Browse latest Browse all 352

Keyboarding collapsing layout

$
0
0

Am using 3.1.3.GA sdk, Alloys and 2.3.3 Android Emulator. This is my UI before opening Keyboard and When user opens keyboard to type, its becoming like this. If I set height to specific its working and am using percentages so its getting collapsed, how to manage this using percentages itself or else how to provide height which fits all size phones and tabs.

** index.xml **

<Alloy>
    <Winow>
    <View id="signin">
        <View id="signinform">
            <ImageView id="logo"></ImageView>
            <TextField id="username" value="Username"></TextField>
            <TextField id="password" value="Password"></TextField>
            <Button id="go" title="Go"></Button>
            <Label id="forgotpassword">Forgot Password?</Label>
            <Label id="newuser">New User?</Label>
        </View>
    </View>
    </Window>
</Alloy>
** index.tss **
'#signin': {
    left: 0,
    backgroundColor: '#0083E5',
    width: '100%'   ,
        height: '100%'
},
'#signinform': {
    width: Ti.UI.FILL,
    height: '70%',
    top: '15%',
    bottom: '15%'
},
'#logo': {
    image: '/images/firstlogo.png',
    top: 0
},
'TextField':{
    color: '#fff',
    width: '95%',
    height: '12%',
    borderRadius: 5,
    borderColor: '#fff',
    borderWidth: 1,
    backgroundColor: '#0083E5',
    backgroundImage: 'none',
    keyboardType: Titanium.UI.KEYBOARD_ASCII,   
    font: {
        fontFamily: 'tt0001m_0',
        fontSize: '25'
    }
},
'TextField[platform=android]': {
    softKeyboardOnFocus: Titanium.UI.Android.SOFT_KEYBOARD_SHOW_ON_FOCUS,
    windowSoftInputMode : Ti.UI.Android.SOFT_INPUT_ADJUST_PAN
},
'#username': {
    top: '30%'
},
'#password': {
    passwordMask: true,
    top: '45%'
},
'#go': {
    top: '60%',
    borderRadius: 5,
    color: '#0083E5',
    width: '95%',
    height: '20%',
    font: {
        fontFamily: 'tt0001m_0',
        fontSize: '70'
    },
    backgroundGradient: {
        type: 'linear',
        startPoint: {x: '0%',y: '0%'},
        endPoint: {x: '0%',y: '100%'},
        colors: [
            {color: '#FEFEFE',offset: '0.0'},
            {color: '#DEDEDD',offset: '1.0'}
        ]
    }
},
'#forgotpassword': {
    color: '#fff',
    width: Ti.UI.SIZE,
    height: Ti.UI.SIZE,
    left: '7%',
    top: '85%',
    font: {
        fontFamily: 'tt0001m_0',
        fontSize: '25'
    }
},
'#newuser': {
    color: '#fff',
    width: Ti.UI.SIZE,
    height: Ti.UI.SIZE,
    left: '7%',
    top: '92%',
    font: {
        fontFamily: 'tt0001m_0',
        fontSize: '25'
    }
}

Viewing all articles
Browse latest Browse all 352

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>