It is currently Wed Jun 28, 2017 12:25 pm



Welcome
Welcome to rfobasic

You are currently viewing our boards as a guest, which gives you limited access to view most discussions and access our other features. By joining our free community, you will have access to post topics, communicate privately with other members (PM), respond to polls, upload content, and access many other special features. In addition, registered members also see less advertisements. Registration is fast, simple, and absolutely free, so please, join our community today. **You are not required to provide truthful information to any registration questions. Be whomever you wish to be.!


Post new topic Reply to topic  [ 30 posts ]  Go to page 1, 2, 3  Next
Author Message
 Post subject: GUI layout
Unread postPosted: Wed Dec 07, 2016 12:50 am 
Offline

Joined: Wed Feb 20, 2013 3:25 pm
Posts: 423
Location: Italy
Hi Nicolas,

It seems to me that the reason why on my tablet controls overlap text is due to the fact that text and controls are laid out on the same lines.
On the contrary, in the Google Play images text and controls appear on different lines.
Do you have any idea why this is the case?
I attach some screenshots.

/ Luca

Image

Image

Image


Top
 Profile  
 
 Post subject: Re: GUI Layout
Unread postPosted: Wed Dec 07, 2016 1:11 am 
Offline
User avatar

Joined: Tue Jan 03, 2012 9:31 am
Posts: 5543
Location: Paris, France
Hi Luca, thanks ! This is a very interesting feedback !
This will definitely help me in the adaptive/responsive research I'm doing for the GW lib.

All internal layout in GW is handled by jQuery Mobile.

Apparently on smartphone the labels before the control itself are always standing on a separate line. Sometimes it's even bothering, that is why I use a SHELF with a TEXT on the left and a CONTROL without label on the right.. (but not on your screenshots).

But it seems jQM does the opposite on tablets (!!) your screenshots clearly show that labels are *always* on the same line, even when there's so little space it's hidden behind the control :shock:

I'll investigate.
I will see how I can test my GW pages on a 10" tablet layout, I think Chrome on PC allows that...
If I find a clear Javascript function to tell me on what form-factor I'm running, I'm confident I can use it to tune the layout accordingly.

Nicolas

_________________
- Creator of the Android BASIC! Compiler


Top
 Profile  
 
 Post subject: Re: GUI Layout
Unread postPosted: Wed Dec 07, 2016 1:16 am 
Offline

Joined: Sat Mar 02, 2013 11:04 am
Posts: 866
Location: France
Hi Luca,

this is exactly what I wanted to avoid with my SCALE question with GW.
If the controls can not fit in the width of the screen they take 2 lines or other behavior not so aesthetic;
Even if you don't put 2 controls on the same line, sometimes only one control like the INPUT that have text + an input field have the same behavior ...

Cheers

Gilles

_________________
"It is better to mobilize intelligence for stupid things, rather than mobilizing stupidity for intelligent things."
Galaxy TAB S 8.4, 2560x1600, Marshmallow 6.0.1
Galaxy Note II, 1280x720, JB4.1.2
Galaxy A3, 1280x720, Android 6.0.1


Top
 Profile  
 
 Post subject: Re: GUI layout
Unread postPosted: Wed Dec 07, 2016 1:52 am 
Offline

Joined: Wed Feb 20, 2013 3:25 pm
Posts: 423
Location: Italy
Just a note: mine is a 8'' tablet.

Wondering if the solution could be:
1. Always use controls without text;
2. If one wants controls and text on the same line use SHELF;
3. If one wants controls and text on separate lines, put manually text on the previous line to the controls.

/ L

PS: If you don't find that JS function, maybe you could use the SCREEN.SIZE command?


Last edited by luca_italy on Wed Dec 07, 2016 2:17 am, edited 1 time in total.

Top
 Profile  
 
 Post subject: Re: GUI layout
Unread postPosted: Wed Dec 07, 2016 2:13 am 
Offline

Joined: Sat Mar 02, 2013 11:04 am
Posts: 866
Location: France
or just have a little more power on the formatting controls ;)

_________________
"It is better to mobilize intelligence for stupid things, rather than mobilizing stupidity for intelligent things."
Galaxy TAB S 8.4, 2560x1600, Marshmallow 6.0.1
Galaxy Note II, 1280x720, JB4.1.2
Galaxy A3, 1280x720, Android 6.0.1


Top
 Profile  
 
 Post subject: Re: GUI layout
Unread postPosted: Wed Dec 07, 2016 2:43 am 
Offline
User avatar

Joined: Tue Jan 03, 2012 9:31 am
Posts: 5543
Location: Paris, France
SCREEN.SIZE reports the screen width in pixels, but as you are now (very ;)) aware, jQuery uses "viewports" that send back a totally different resolution.

For example my Honor 5X screen is 1080 x 1920 pixels, but the jQM viewport is 360 x 592 (!)
Btw here is the code to get the viewport:
Code:
JS("var d=document.documentElement;alert(d.clientWidth+'x'+d.clientHeight)")


We are not the first one to complain about jQM controls and their labels behaving not gracefully, see these posts:
http://stackoverflow.com/questions/20091072/label-and-input-in-same-line-on-mobile
http://stackoverflow.com/questions/28594909/jquery-mobile-have-input-and-label-on-the-same-line-inside-table-regardless-o
http://stackoverflow.com/questions/10685167/jquery-mobile-labelinputlabel-in-some-lines

Nicolas

_________________
- Creator of the Android BASIC! Compiler


Top
 Profile  
 
 Post subject: Re: GUI layout
Unread postPosted: Wed Dec 07, 2016 2:46 am 
Offline

Joined: Wed Feb 20, 2013 3:25 pm
Posts: 423
Location: Italy
I made a test, actually putting manually text on the previous line doesn't look as a beautiful solution, in fact if the text lengths are different, then labels and controls get misaligned.
Something like this:

Code:
Long text for button 1   Text 2  Text 3
Button 1       Button 2        Button 3


/ L


Top
 Profile  
 
 Post subject: Re: GUI layout
Unread postPosted: Wed Dec 07, 2016 2:50 am 
Offline

Joined: Wed Feb 20, 2013 3:25 pm
Posts: 423
Location: Italy
The only viable solution then seems to be:

1. Always use controls without labels;
2. Always put text label and relative control on the same line manually through SHELF.

/ L

PS: Maybe you could create two new GW functions which report d.clientWidth and d.clientHeight, and include them into GW 4.5? (Or maybe you could include them into GW_UTILS ;) )


Top
 Profile  
 
 Post subject: Re: GUI layout
Unread postPosted: Wed Dec 07, 2016 3:02 am 
Offline
User avatar

Joined: Tue Jan 03, 2012 9:31 am
Posts: 5543
Location: Paris, France
I beg to differ Luca, this will be a hassle for the GW user ;)
Some of the stackoverflow I mentioned give a good workaround, either a custom CSS to replace the deficient jQM one, or use floating divs instead of the jQM "fieldcontain" that messes everything up.
I would be more in favor of doing changes in the GW internals, leaving the user code untouched.

Nicolas

_________________
- Creator of the Android BASIC! Compiler


Top
 Profile  
 
 Post subject: Re: GUI layout
Unread postPosted: Wed Dec 07, 2016 3:08 am 
Offline
User avatar

Joined: Tue Jan 03, 2012 9:31 am
Posts: 5543
Location: Paris, France
luca_italy wrote:
PS: Maybe you could create two new GW functions which report d.clientWidth and d.clientHeight, and include them into GW 4.5? (Or maybe you could include them into GW_UTILS ;) )

Come one :lol: are you so eager to make a bloated library ??
I'm really concerned of slowing down the GW startup, and this will certainly happen if I start adding functions that can be done with a less-than-20-character javascript!

_________________
- Creator of the Android BASIC! Compiler


Top
 Profile  
 
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 30 posts ]  Go to page 1, 2, 3  Next


Who is online

Users browsing this forum: No registered users and 0 guests


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  
suspicion-preferred