Controls size control problem with Mobile interface

[jlavera]

- Clarion 6.3 9059  and  Clarion8 9304 V6.3
- Nettalk 6.51  (WebServer and mobile mode)

I have several problems with my web server with mobile users.
All problems are based in size of controls (entrys, buttons, browses, drops, etc..). (See image1, then image2 and then image3). Also the annoying change in the browse size: proper at first, bigger when back from the Form.

I have searched for information in NettalkCentral and Nettalk docs about it but I have not found the solution.
For Drops type, I had try with "Width (PIXELS):" option, but to no effect. (see image4). The controls seems to take the screen width, always.
For Date type, I had try with "Width (chars):" and also "Max length:" options, but they have not effect. (see image5) The controls also seems to take the screen width, always.

Note all these looks ok on PC screens, they just fail on phones (Tried several navigators and OS - including Android 4.0).
Any suggestion will be appreciated.

[attachment deleted by admin]

[Bruce]

let's take the obvious ones first;

pic2 : if there is insufficient space for a control, then the browser will move it. In this case there is insufficient space for the prompt (Date Started) and the date field and the time field, horizontally, so the time field is moved down. Probably the best thing here is to make the time field itself smaller (the Width (Chars) setting for the field). Same for the time Finished field.

[DonRidley]

jlavera,

Getting everything perfected to look good on the desktop side and the mobile side takes allot of patience and some creativity.

Image 1:  Your browse needs to have some fields removed from mobile mode or placed on different lines.  In mobile mode, you have to be very selective as to what you will show to the end user.  You simply cannot display the same amount as in desktop mode.

On your forms, you can have 2 of the same fields but with different equates.  Perhaps one field for the desktop and one field for mobile mode. 

"Last on Line" is a life saver.   Mobile Only is your friend.

It can be done.  Ain't always easy but it can be done.

Good luck with your project!

Don

[Jeff Martens]

To reinforce and reply to Don's advice:

You know the mobile screen is very limited in row width and height.
Make a mockup - perhaps a text box in Word using appropriate fonts and font sizes.  Use your ruler line, if this helps.
Are you designing this to be used in Portrait or Landscape mode?
Test your placement of prompts and fields by typing in the appropriate number of characters in the positions that you would like to see them.

This gives you a starting point.

Go back to NetTalk and start looking at how many characters you are allowing to be displayed.
e.g.  In your table you may have a string(80) but on screen you may make the field width to show only 25 without manually scrolling)

You have to measure and fit all text field characters and buttons on the screen.
---