What are the good practices to not have problems with mobile view?

[Giu]

I'm testing several screens to see how mobile view works and try to understand to design new screens mobile first, but I have different behaviors and don't understand why at all. Screens comes from Firefox mobile

IMG_20240516_231126.jpg

IMG_20240516_231102.jpg

IMG_20240516_231046.jpg

IMG_20240516_231854.jpg

As you can see zome screens looks by default like if I zoomed in, and others like if I zoomed out. Last looks perfect.

What are the good practices to get mobile nice looking screens if I want to do mobile first?

[kev1n]

The 2nd Screenshot/Form shows an embedded form. I'm afraid these are not optimised for mobile view at the moment.
As a workaround you could take a normal browse form and then display the additional info above the browse form. Use the BE event and create/display elements within nuAddJavaScript()

[Giu]

The 2nd Screenshot/Form shows an embedded form. I'm afraid these are not optimised for mobile view at the moment.
As a workaround you could take a normal browse form and then display the additional info above the browse form. Use the BE event and create/display elements within nuAddJavaScript()

Yep, exactly, it's a launch form with a run iframe field. Will take a look at your suggestion.

And what about the zooming in the other launch/user form and edit form? There are ways to control about the zooming application will do?

Regards.

[Giu]

This is what I told you if there is some way to solve this kind of issue. Both forms are mobile enabled

This is the form from PC

QfbNnCdr3P.png

And this is how it looks on mobile.
Ths is the form.

tEqJFkpSkR.png

And this is how it looks if you press the magnifying glass

XzLETW7MTM.png

[kev1n]

The question is, how should it be adjusted for mobile devices? If there are many columns, not all of them can be displayed and you have to scroll. You could make the font smaller and reduce the row height. How would you like to see it displayed?

[Giu]

It's the question yes. I understand I have to adjust for bigger/complex forms, but If you see the first screenshot, the form only has a lookup and a button, nothing more. I recorded a video.

https://www.youtube.com/watch?v=RJweKJvYrfw

00:00 - 00:06 Scroll in Home when all buttons are one below other. This form is starts zoomed, I forgot to show it on the video

00:07 - 00:10 This browse looks good, has a little 1px scroll but looks good.

00:11 - 00:15 This looks zoomed out too

00:16 - 00:21 It's ok

00:22 - 00:42 Forms starts zoomed in a lot. You can see how big is the scroll. Later you can see how I can zoom out, and how big lookup browse form with only 3 fields with auto wifth looks. And forms only has a button and a lookup, nothing more.

I try to create minimalist forms to have compatibility with use in mobile, but when only one field and a button is shown bad, I can't understand what to do to get good results.

[Giu]

I'm doing some research, and seems the problem is on a transform scale CSS rule to #nubody. In the forms I have problems, I see this has a value of 2, 2.4 and so on, and changing to 1 the form looks ok. There are problems too opening a browse in popup from a lookup, but this is another history, related, I think, with autowidth columns.

I see this is applied at nuForm.js, function nuPortraitScreen.

In line 6615:

Code: Select all

	$('#nubody').css('width', objectWidth).css('transform', 'scale(' + scale + ')')

I didn't had time yet to understand exactly what this function tries to do, just making notes here. I noticed other issues but will share once I have time to check it better.

[kev1n]

You could try calling this line of code with a custom scale in the form's custom code. E.g. pass 1 as scale and increase/decrease until you get a satisfying result.

Examples:

Code: Select all

// Scale the element to 50% of its original size
$('#nubody').css('transform', 'scale(0.5)');

// Reset the element to its original size
$('#nubody').css('transform', 'scale(1)');

// Scale the element to 200% of its original size
$('#nubody').css('transform', 'scale(2)');