triceam / app-UI

app-UI is a collection of user interface components that may be helpful to web and mobile developers for creating interactive applications using HTML and JavaScript, especially those targeting mobile devices. app-UI is a continual work in progress - it was born out of the necessity to have rich & native-feeling interfaces in HTML/JS experiences, and it works great with PhoneGap applications (http://www.phonegap.com). app-UI can easily be styled/customized using CSS.
http://triceam.github.com/app-UI/
Other
1.27k stars 228 forks source link

form fields are not working #23

Closed danielbwa closed 12 years ago

danielbwa commented 12 years ago

Good afternoon,

when i insert a form, the fields are not working, in terms of its there but its a sort of disabled. you can click it. i think because of a 'layer' is on top of it but im not sure what do about it and maybe i'm missing something...

for example:

            var defaultView = { title: "Form field check", 
                      view:  $('<div id="defaultView"><input style="z-index:999;" type="text" class="span3" placeholder="Email"></div>')
                            };

            //Setup the ViewNavigator
            new SplitViewNavigator( 'body', "Menu", "btn primary" );    
            window.splitViewNavigator.pushSidebarView( controller.rootView );
            window.splitViewNavigator.pushBodyView( defaultView );

inserts a input type text in the Bodyview and in my project the text field is not working in Desktop browsers and safari mobile. I already give it a z-index:999 and removed the jquery click on 'this.contentOverlay' for testing but that doesn't make any difference.

I also would like to help to improve the code base but as there is no manual i'm not sure if its really a bug or that its my code...

Would like to know how form elements behave on your side?

Greetings, Daniel

triceam commented 12 years ago

I have seen this before... I actually think its a bug in iScroll. Let me take a look, I should have a fix shortly.
Thanks, Andy

triceam commented 12 years ago

Actually, this code works fine for me in Chrome on OSX. What is your browser/environment? Also, make sure you didn't remove this from the stylesheet:

input, textarea { -webkit-touch-callout: auto; -webkit-user-select: auto; }

triceam commented 12 years ago

OK, I correct myself. I am able to reproduce this (it works fine if you disable scrolling), it is a bug in iScroll, as I suspected. Stay tuned... I'll post an update shortly. You can disable scrolling by setting "scroll: false" in the view descriptor:

var defaultView = { title: "Form Test", view: $('

');, scroll: false };

triceam commented 12 years ago

Just committed a fix, grab the latest code and you should be all set. Also, be sure to grab the latest viewNavigator.js file b/c I fixed a critical bug in there too.

danielbwa commented 12 years ago

Just did an update and works like a charm! I see you've edited iScroll.js for this fix...this can be tricky when iScoll gets updated right? i have never used iScroll but i saw an initsomething like this maybe handy:

onBeforeScrollStart: function (e) {
    var target = e.target;
    while (target.nodeType != 1) target = target.parentNode;

    if (target.tagName != 'SELECT' && target.tagName != 'INPUT' && target.tagName != 'TEXTAREA')
    e.preventDefault();
}

i found this post about the bug in iScroll: http://stackoverflow.com/questions/5745374/iscroll-4-problem-with-form-select-element-iphone-safari-and-android-browser

and i can not test the form elements in Android, but when i can i will look out for this.

Again, thank you very much for the fix!