Titanium Community Questions & Answer Archive

We felt that 6+ years of knowledge should not die so this is the Titanium Community Questions & Answer Archive

Textfield getting hidden by keyboard

Hi

My textfield is not sliding up and getting hidden by the keyboard. What could be the reason for this?

Here is my config for the textfield

http://pastie.org/988526

This is happening in both 1.2.0 and 1.3.0

Here is a video of the issue

http://www.youtube.com/watch?v=Z5sOETRou0k

— asked June 2nd 2010 by Dev Priya
  • iphone
  • textfield
  • ui
0 Comments

5 Answers

  • You need to attach your textfield to a scrollView, not a window. The scrollView will automatically adjust for the opening/closing of the keyboard.

    //Current Window You're Using
    var win1 = Ti.UI.currentWindow;
    
    //Create your scrollView
    var scrollView1 = Ti.UI.createScrollView({ 
       contentWidth:'auto', 
       contentHeight:'auto', 
       top:0, 
       showVerticalScrollIndicator:true, 
       showHorizontalScrollIndicator:true 
    });
    
    //Create a View
    var view1 = Ti.UI.createView({ 
       left:0, 
       right:0, 
       height:'auto', 
       top:0 
    });
    
    //Instantiate
    scrollView1.add(view1);
    win1.add(scrollView1);
    
    //Define your textfield
    var yourTextField = createTextField({ ... });
    
    //Add Textfield to scrollView
    view1.add(yourTextField);
    

    Hopefully that helps.

    — answered August 7th 2010 by Clifton Labrum
    permalink
    3 Comments
    • when you do this…the keyboard automatically pop up…

      — commented June 15th 2011 by Florent Cardot
    • It Worked

      — commented July 11th 2011 by Ankesh Srivastava
    • Great solution to this problem. Thanks!

      — commented September 15th 2011 by Danny Sh.
  • I had the same issue. The solution was to scroll the window up when the textfield is on focus. Here is what I did:

    textfield.addEventListener('focus', function() {
        win.animate({bottom: 166, duration:500});
    });
    
    textfield.addEventListener('blur', function() {
        win.animate({bottom: 0, duration:500});
    });
    
    — answered August 5th 2010 by Rodrigo Soares
    permalink
    2 Comments
    • That worked well for me. Thanks!

      — commented March 25th 2011 by Evan McDaniel
    • very well done…

      — commented February 21st 2014 by S Ayyagary
  • And along with this I would also like to know if there is any way of hiding any open keypad in a window. Something which is like blur all.

    — answered June 2nd 2010 by Dev Priya
    permalink
    0 Comments
  • I have the same problem. Did you found any solution? Maybe, Titanium.UI.ScrollView ist the right thing.
    Thanks

    Thorsten

    — answered June 2nd 2010 by Thorsten Marx
    permalink
    0 Comments
  • ScrollView solves that issue however when srolling up the animation is smooth but when scrolling back down the animation not smooth or no animation at all. Any ideas?

    — answered February 20th 2013 by Irwin Nardo
    permalink
    1 Comment
    • this bugs me too. did you find any solution?

      — commented June 21st 2013 by Pawel Olas
The ownership of individual contributions to this community generated content is retained by the authors of their contributions.
All trademarks remain the property of the respective owner.