Mobile forms and themes and design

hpl123

hpl123 wrote
hpl123 wrote
Yes, too bad no others share and participate, I am not suprised 🙂. It might also be as you say nobody else is digging into these things or using mobile much.

Regarding both of these issues, they are solvable via CSS and as both of these are no "just do this" problems and also I think depends a bit on app layout and theme used, I have no "formula" but here are some tidbits from my head and notes on these things if it helps:
The first one is something I struggled a lot with and is a combination of many different things, adjustments in CSS etc. and the main thing that got me on the path to finding a solution was doing changes to the CSS overflow properties for the entire body + for the layout where I use a form + adding some small CSS adjustments here and there. Try doing the following:
Override the overflow set for html/body by Aware to (do the override ONLY for mobile VP´s as it messes up things in the desktop VP so have the override for example in a HTML content panel at the top of your mobile VP using a <style></style> tag):
html,
body
{
 overflow:unset !important;
}
Create a custom class in your custom CSS file for the app where you add:
.mycustommobileformclass
{
height: 100%;
overflow: visible !important;
}
Add the new custom class as a class used by the content panel (i.e set "CSS class" in the VP configuration for the content panel) that displays your form in your mobile VP.
Add the following CSS style override to your mobile form. I use it with a <style></style> tag in the form header:
.k-scrollable
{
overflow: auto !important;
}
Test form on a mobile, the keyboard problem etc. and make small adjustments to margins etc. if needed. The form height and content panel height has to be UNSET i.e not set if I remember correctly.
I am not sure if I have made other changes via custom CSS files, startup.html or forms that contributes to it being solved for me (I also have various other configuration parts related to this to enable my mobile/tablet uniform design which may contribute) but try it (I THINK it will work for you) and report back if it does and if so, we can maybe report to Vlad and he can look at a real fix for this for core Aware IM.

The second one (if I understand you correctly) is also a bit tricky. I have no horisontal scroll issues at all (after tinkering) so is entirely solvable via CSS as well. In Aware mobile the setup of the different divs etc. and it´s CSS creates some inconsistencies (mostly related to CSS margins + Aware having many many container divs. If you look at the DOM of an Aware form for example you see a very long tree of things that affect the actual form end result) and there and a 2 parts of this particular problem I have changed via CSS: Manipulate overflow-x (hide if in most cases if horisontal scroll is not needed) + change margin for rows (.row classes) where Aware adds a margin of 13px I think it is in different places (or if it is Bootstrap that messes it up with the row CSS, I can´t remember which). Aware also adds 20px to some left side margins and 10px to others and this also creates problems.

Regarding the custom HTML forms, I have actually not used these and great as they are, I was concerned about performance and also to some extent with security. I am not sure how Awaresoft solved it and if they hacked up some solution to make it work (no offense Awaresoft 🙂 ) so felt a bit icky to me 🙂 + I have managed (via a lot of tinkering) to do what I want with the existing Aware forms. I also use forms in many places instead of queries to deliver a uniform UI/UX (form with references thing I wrote about in my last post). I might look into it some more in the future though and what you did looks really nice so I understand it is a powerful/nice feature and might be the easier path compared to how I do it BUT it has it´s limitations so isn´t fix all solution to form problems either.
Aaarrrggh, I found some issues related to IOS today with the described above approach where it doesn´t work and instead freese scrolling in queries. Back to tinkering 🙁. Shit problem this to have, it has to be able to be solved in some way.

It seems the solution above works for the keyboard popup shift problem on IOS as well but what doesn´t work is a particular custom query where scroll doesn´t work and might be unrelated when looking further into it so the solution above should still be SOMEWHAT ok (still a messy hack and we need a real fix for this).

hpl123

hpl123 wrote
hpl123 wrote
hpl123 wrote
Yes, too bad no others share and participate, I am not suprised 🙂. It might also be as you say nobody else is digging into these things or using mobile much.

Regarding both of these issues, they are solvable via CSS and as both of these are no "just do this" problems and also I think depends a bit on app layout and theme used, I have no "formula" but here are some tidbits from my head and notes on these things if it helps:
The first one is something I struggled a lot with and is a combination of many different things, adjustments in CSS etc. and the main thing that got me on the path to finding a solution was doing changes to the CSS overflow properties for the entire body + for the layout where I use a form + adding some small CSS adjustments here and there. Try doing the following:
Override the overflow set for html/body by Aware to (do the override ONLY for mobile VP´s as it messes up things in the desktop VP so have the override for example in a HTML content panel at the top of your mobile VP using a <style></style> tag):
html,
body
{
 overflow:unset !important;
}
Create a custom class in your custom CSS file for the app where you add:
.mycustommobileformclass
{
height: 100%;
overflow: visible !important;
}
Add the new custom class as a class used by the content panel (i.e set "CSS class" in the VP configuration for the content panel) that displays your form in your mobile VP.
Add the following CSS style override to your mobile form. I use it with a <style></style> tag in the form header:
.k-scrollable
{
overflow: auto !important;
}
Test form on a mobile, the keyboard problem etc. and make small adjustments to margins etc. if needed. The form height and content panel height has to be UNSET i.e not set if I remember correctly.
I am not sure if I have made other changes via custom CSS files, startup.html or forms that contributes to it being solved for me (I also have various other configuration parts related to this to enable my mobile/tablet uniform design which may contribute) but try it (I THINK it will work for you) and report back if it does and if so, we can maybe report to Vlad and he can look at a real fix for this for core Aware IM.

The second one (if I understand you correctly) is also a bit tricky. I have no horisontal scroll issues at all (after tinkering) so is entirely solvable via CSS as well. In Aware mobile the setup of the different divs etc. and it´s CSS creates some inconsistencies (mostly related to CSS margins + Aware having many many container divs. If you look at the DOM of an Aware form for example you see a very long tree of things that affect the actual form end result) and there and a 2 parts of this particular problem I have changed via CSS: Manipulate overflow-x (hide if in most cases if horisontal scroll is not needed) + change margin for rows (.row classes) where Aware adds a margin of 13px I think it is in different places (or if it is Bootstrap that messes it up with the row CSS, I can´t remember which). Aware also adds 20px to some left side margins and 10px to others and this also creates problems.

Regarding the custom HTML forms, I have actually not used these and great as they are, I was concerned about performance and also to some extent with security. I am not sure how Awaresoft solved it and if they hacked up some solution to make it work (no offense Awaresoft 🙂 ) so felt a bit icky to me 🙂 + I have managed (via a lot of tinkering) to do what I want with the existing Aware forms. I also use forms in many places instead of queries to deliver a uniform UI/UX (form with references thing I wrote about in my last post). I might look into it some more in the future though and what you did looks really nice so I understand it is a powerful/nice feature and might be the easier path compared to how I do it BUT it has it´s limitations so isn´t fix all solution to form problems either.
Aaarrrggh, I found some issues related to IOS today with the described above approach where it doesn´t work and instead freese scrolling in queries. Back to tinkering 🙁. Shit problem this to have, it has to be able to be solved in some way.
It seems the solution above works for the keyboard popup shift problem on IOS as well but what doesn´t work is a particular custom query where scroll doesn´t work and might be unrelated when looking further into it so the solution above should still be SOMEWHAT ok (still a messy hack and we need a real fix for this).

I can confirm the issue I wrote about above is unrelated to the hack/fix with keyboard shifting layout i e the above solution fully works/solves the keyboard shift problem on all devices.

aware_support

We cannot reproduce the keyboard problem, unfortunately. But maybe this solution will fix it - please let us know if it makes any difference and if it does we'll integrate it in the product.

Go to the properties of the form that exhibits the problem in the Configuration Tool
Open the Scripts property of the FORM (note - the form, not form section!!)
Add the following Initialisation script:
widgets.push ({
type: "mobileScroller",
id: parser.m_formId,
config: {}
});
Add the following "render script"
$("#" + parser.m_formId).addClass ("km-content").attr("data-role", "content").parent ().addClass ("km-view");

aware_support

Another possible solution is to add user-scalable=no to the <meta viewport ..> tag in the startup.html:

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

Could you please try that as well?

hpl123

Support,
Here is error report and how to reproduce or did you try this? Mobile form bug, virtual keyboard popup>

No matter what phone I try I get this problem. I will test the workarounds you have (the first one is new, the second one I am pretty sure I have tested and don´t work).

hpl123

hpl123 wrote
Support,
Here is error report and how to reproduce or did you try this? Mobile form bug, virtual keyboard popup>

No matter what phone I try I get this problem. I will test the workarounds you have (the first one is new, the second one I am pretty sure I have tested and don´t work).

I have not added the suggested workarounds and very strange, the BSV I created and posted (link above) in June does NOT present the same issue now i.e everything works as it should now when I try it (and it didn´t a month ago). I have a new phone (but use the same browser) and/so not sure if that is the thing. This has been an issue for years so either something has changed somewhere or this new phone handles this in another way. I have had this issue on ALL Iphone and Android phones I have tested it on in the past.

Can someone else that experiences this issue try it? Rod? Someone else? I will also try some additional things to see if it really is working fully or just works for the sample BSV I posted.

hpl123

hpl123 wrote
hpl123 wrote
Support,
Here is error report and how to reproduce or did you try this? Mobile form bug, virtual keyboard popup>

No matter what phone I try I get this problem. I will test the workarounds you have (the first one is new, the second one I am pretty sure I have tested and don´t work).

I have not added the suggested workarounds and very strange, the BSV I created and posted (link above) in June does NOT present the same issue now i.e everything works as it should now when I try it (and it didn´t a month ago). I have a new phone (but use the same browser) and/so not sure if that is the thing. This has been an issue for years so either something has changed somewhere or this new phone handles this in another way. I have had this issue on ALL Iphone and Android phones I have tested it on in the past.

Can someone else that experiences this issue try it? Rod? Someone else? I will also try some additional things to see if it really is working fully or just works for the sample BSV I posted.

Well, I am officially mindboggled. All works now also in a live app and the main app I had issues with and where I tinkered to the solution I wrote about above. Something has changed and I hope it´s permanent. Other experiencing this issue please confirm and I have no other phones ATTM I can try it on and/but I hope this is "global" and not just my new phone.

Jaymer

i have 2 diff iphones, + android + iPad.
will try it

rocketman

I'm just starting to tinker .... But before I do, I have just one question to ask if anyone knows the answer.

My App is a full blown back office admin system for gliding clubs with a number of VP's depending whether the member is part of the Office, finance or Operations team - or just a mere mortal member.

The mobile app I want to design is just a partial subset of what the desktop app can do - primarily for members to view certain things like their flying log books, their balances and let people know they are coming to fly.

So my question is - do I have to convert the entire app for mobile use or can I just recreate one VP as a mobile app. At the moment I have a VP optimised for phones but I'm finding that whilst it works well for iPhone users, not all Android phones are recognised as phones so the user gets the full blown desktop version. The technique I've been trying to use is by recognising the screen size - but with modern high res smartphone screens, that technique is not as reliable as it used to be.

I get round it by constructing a special url using the "mobile_platform=Phone" trick - but try trying to explain to a 65 year old glider pilot how to do that

hpl123

rocketman wrote
I'm just starting to tinker .... But before I do, I have just one question to ask if anyone knows the answer.

My App is a full blown back office admin system for gliding clubs with a number of VP's depending whether the member is part of the Office, finance or Operations team - or just a mere mortal member.

The mobile app I want to design is just a partial subset of what the desktop app can do - primarily for members to view certain things like their flying log books, their balances and let people know they are coming to fly.

So my question is - do I have to convert the entire app for mobile use or can I just recreate one VP as a mobile app. At the moment I have a VP optimised for phones but I'm finding that whilst it works well for iPhone users, not all Android phones are recognised as phones so the user gets the full blown desktop version. The technique I've been trying to use is by recognising the screen size - but with modern high res smartphone screens, that technique is not as reliable as it used to be.

I get round it by constructing a special url using the "mobile_platform=Phone" trick - but try trying to explain to a 65 year old glider pilot how to do that

A couple of things / thoughts:

Yes, you can/should create a separate VP for mobile and only include parts of your main app and one thing I did was to then build on it over time i.e start with essentials and keep adding features to the mobile VP.
Yes, the current Aware resolution solution i.e recognising which device is used e.g desktop, mobile etc. is not working fully any longer and I have gotten around this in 2 different ways:
- Create 1 VP for mobiles and tablets and that works with the current Aware device recognition but means you have to make sure the app layout works fully on phones and tablets.
- Create a separate mobile login form which has the hidden mobile platform parameter in it which means you don´t have to add it to the url. Just add the following to your form code for the mobile login form:
```
<input name="mobile_platform" type="hidden" value="Phone">
```
  You can also then if you want create a non Aware login form "launcher" with some JS code in it that accurately determines platform and then redirects the user to the "right" logon form for them. This is fairly easy to do and works and means you will always have 1 URL only for all users to use when logging into your app and then the form/code under that URL then determine platform and redirects.

Happy tinkering 🙂

hpl123

Jaymer wrote
i have 2 diff iphones, + android + iPad.
will try it

How did it go Jaymer, did you test this on your phones? We are still testing this (Rod, Vlad and myself) to try to find a solution and/but more tests is needed. I still get all working strangely enough from no additional changes i.e I have removed all my custom fixes and all works now :?: 😮 .

Jaymer

My tests on iPhone 7, iPad Pro, Android v8 w/Chrome were just fine.
I scrolled down to click into the last field.
A keyboard popped up, and the screen scrolled up.
After typing text, when the keyboard closed, the screen scrolled back down and seemed to be normal operation.

In the past, I HAD seen this odd behavior where the screen did NOT re-adjust after closing keyboard - but I tend to think it was with my "native" mobile app (which I can't rebuild because I haven't adjusted to the non-PGB method yet.)

And for some reason, I have this line in my startup.html from some prior fiddling:

    <meta name="viewport" content="width=device-width, initial-scale=1">

« Previous Page