Keyboard overlapping over textfield

2 posts, 0 answers
  1. Paulson
    Paulson avatar
    50 posts
    Member since:
    Apr 2016

    Posted 01 Oct Link to this post

    Hi,

    I am having a login page in android app with two fields as specified in image given below.When i click the password field the keyboard gets overlapped in password.Is there a way to move the text field up when the keyboard get opened.

    Thanks 

    screen shots attached :https://drive.google.com/open?id=0B1u4PKmp8y80bnpneGdzcDZEdDA

  2. nikolay.tsonev
    Admin
    nikolay.tsonev avatar
    67 posts

    Posted 03 Oct Link to this post

    Hi,

    To prevent from this problem while  Android soft keyboard hiding input elements, you could set as main container  ScrollView. On tap on some of the field  near the bottom of the app, the selected element will be moved above the virtual keyboard. Regarding to that for iOS there is an existing plugin that provides this functionality. I am attaching sample code, where has been shown the above given suggestion.



    main-page.xml
    <Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo">
      <StackLayout>
        <ScrollView  id="sv">
            <GridLayout  rows="auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto">
                     
                    <Label text="test" textWrap="true" />
                    <TextField id="tf1" onTap="fieldtap" onTap="fieldtap" height="150" row="0" text="Title 1"></TextField>
                    <TextField id="tf2" onTap="fieldtap" onTap="fieldtap" height="150" row="1" text="Title 2"></TextField>
                    <TextField id="tf3" onTap="fieldtap" height="150" row="2" text="Title 3"></TextField>
                    <TextField id="tf4" onTap="fieldtap" height="150" row="3" text="Title 4"></TextField>
                    <TextField id="tf5" onTap="fieldtap" height="150" row="4" text="Title 5"></TextField>
                     
                </GridLayout>
        </ScrollView>
      </StackLayout>
    </Page>


    I hope this 
    Regards,
    nikolay.tsonev
    Telerik by Progress
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top