One of the bugs that have cropped up in an app I'm working is the following:
1. Page one has a login popup - enter your login information. This page works fine no keyboard slowdown
2. The second dialog on the next page has the user enter some more details and is invoked via a standard JQM popup link.
3. Now the inputs in this new popup have become next to unresponsive and completely unusable - the ipad keyboard sticks and key strokes have a major delay between keystroke character and showing up in the input.
Has anyone experienced this? Any ideas what I need to do to fix this or what problems I need to look at?
I have stripped the page down, and can't see anything that would cause this horrific behavior. I am using the latest version of JQM.
So I noticed this personally on my nexus 7 device [4.1 - jellybean] as well as 4.0 and have heard other users having a similar issue. Pages using jquery mobile don't appear to be able to scroll in Chrome. Anyone else experiencing this and have any ideas where / how to begin to fix this?
This may be something confusing other people so I wanted to try and get some more clarity around the concepts of page layout.
So a basic JQM page layout has a bunch of divs which translates to multiple pages in 1 document. Lots of reading and research across the web and documentation has stated this is not a best practice for a web app.
So here is where the confusion in some of the documentation begins. JQM docs frequently refer to external pages but seems to make (at least no easily identifiable) difference between True External pages (data coming from a 3rd party link ie a link that goes to google.com) v.s. external internal data which results from the breaking of pages into multiple true docs HTML, php, jsp, etc..
Are these considered external links even though they are simply pages for the same application in the same domain but split into pages like a more traditional app. In essence are these are External Internal pages.
login.html goes to home.html
home.html goes to details.html
This leads to a bit of confusion on when do you use certain things like data-rel="external." Would love this if we can clear this up a bit more.
Are pages that are all part of the same app split into separate pages considered external?
What are some things that need to be done to ensure this model works. It seems like from all my reading its recommended to break pages this way, but then everything goes to hell. (odd transitions, pages staying in the Dom and not being removed, duplicate ids,)
I beat my head against the wall for days on this issue. If you are using control groups to create more complex listviews, etc and running into major alignment issues. Make sure that your buttons each of them has "vertical-align:top;
The buttons are using a property display:inline-block on an a element which allows them to float with out float:left, etc.. If you don't do this from the start adding more complex elements in the button will cause massive headaches.
Using this method what a lot of custom css can create some complex 3 or 4 split button lists. It's all in how you design the CSS.
I want to start sharing some of the items I've found over last month of intensive practice, firebug usage, and more. I'm a UX guy so I need to have precise control of all elements JQM spits out. Hopefully this helps people out as they are diving deeper into more sophisticated customizing.
In the following example I have added additional classes to give you more finite controls over a button. These additions make sure you can control text, innerspans, etc. It took me a bit to tighten up this css, but I feel it gives me the control I need to design any type of button. In the following example I have a button with the data-theme="j"
I've added several classes to help get more tight control over a buttons inner-workings. I wanted to work with JQM as opposed to just overriding classes. This provides for much cleaner code.
I noticed more and more as we get deeper into our app. We are working to make our pages separate to allow for better project maintenance. When linking from index.html - > test.html. Some code from the previous page is showing even after the new page loads.
Refreshing test.html causes this extra display code to go away. Any idea what might be wrong?