Mobile form design


Badge +5

Hello,

I finally got into publishing some mobile forms. I was wondering if there's a comprehensive list of html tags/css which will work. It would be nice to be able to apply a custom look and feel but it seems to be a bit of a hit & miss for me right now.

example: <h1></h1> works <br/> does not

styling in form settings and such (color) doesn't seem to work for me either.

Is this by design? Is styling stripped to conform to the application/native OS look and feel?

Thank you,


10 replies

Userlevel 7
Badge +17

I've also found there isn't a lot of styling that you can do in a mobile app as compared to a desktop view, but this may soon change. I don't believe there is a list anywhere of all approved html capabilities, but is there any specific change you are trying to make? Maybe we and the community can look for a solution together?

Badge +5

Thanks Andrew,

Through trial and error I've been able to figure out some of the formatting that I need. (Though the fact that different browsers render things ...differently doesn't help) The Nintex Mobile functionality is pretty amazing so I'm more than willing to put in the time.

Basically I can now add borders or specific controls. I can change background and font color by using the Nintex formatting controls (not within the control itself or by editing the "source html" or css)

I seem to be able to change the weight of the font by using source html (e.g. <h1>, <h2> and I think <strong> may have also worked on Android) but I am not able to change the size via the font size selector.

Have not been able to get the "hide" of the formatting rule to work either.

As you can see, I'm still working through the very basic formatting options.

One thing is really puzzling though, why is the iOS mobile form Dark Gray and Android as well as Win Phone are White? It almost forces you to use only the default color scheme since most colors clash with it. (also can't use the panel control with a title since the title renders only black even on the iOS where all other controls have a default of white font - of course there's a good chance I just don't know where to change it yet happy.png

Userlevel 7
Badge +17

You're right on. And thanks for posting what you can and can't do. I'm also still learning the differences and found the same things, such as the iOS as dark gray and windows phone as white. I'll look closer to see if that is easily changed, but I may have missed a setting too.

Badge +4

Hi Raul,

iOS will be updated in our next release to have a light theme which is aligned with all other platforms. This will make styling much more consistent across platforms.

About the "i" symbol at the bottom right of form/task view page in iOS; So you can have a description, help or guideline for each form in the designer. That text will be displayed when you tap on "i".

And about the data entry form; can you please elaborate a bit more on what the problem is?

thansk

Badge +4

Hi everyone,

thanks a lot for the information you have shared. it's awesome.

I can confirm we don't support any css tag in any mobile platform.

The challenge with supporting css and html is that each OS treats them differently. So as a designer you will probably end up designing a separate layout for each platform. that's the reason we decided to leave css and html tags out. For the same reason we have left font size support out. (each platform has a different interpretation of size).

However you can set basic styling on the label control. if you double click on a label control, you can set following styles which Nintex Mobile supports

​HTML Formatting support per platform​NormalBold​Italics​Underline​Font Color​Alignment​
iPhone​​YesYes​​No*Yes​​Yes
​iPad​YesYes​No*​Yes​​Yes
​Windows Phone​YesYes​​​No*Yes​​Yes
​Windows Tablet​YesYes​​​No*Yes​​Yes
​Android​Yes​Yes​​No*Yes​​No

Please note that for the Font Color, Nintex Mobile only supports Hex and RGB colors set through ribbon (when you select a label).

Hopefully this information helps.

And if there is something missing which need us to support, could you please log in our user voice (6 - Nintex Mobile Apps: Hot (47 ideas) – Customer Feedback for Nintex  ) and vote for it.

cheers,

Badge +3

Hi Vahid,

I am sorry but I don't succeed to change label color or font weight using ribbon controls for Nintex mobile on Android Tablet.

Could you please publish a little step by step ? I think I am missing something on this ...

(screenshot.png

Userlevel 3
Badge +8

Is there a way to change the font size on a mobile form from the Nintex mobile tablet layout?

Thanks

Kassie

Userlevel 7
Badge +17

Not yet ‌, but i'm excited to see that you are using Mobile!

Userlevel 5
Badge +13

Hey Andrew, since you seem to be a Mobile Wizard, perhaps you could help me out.

I have a few mobile form issues: firstly, the image I put as a header doesn't appear on the mobile app. The image is hosted on SharePoint and I'm using the same account in the app and when uploading the image. (tested Android & iOS)

Changing the color of the text doesn't seem to push out to the app (tested Android & iOS)

I have a column that is a Choice that allows multiple selections and allows fill in choices. The fill in choices appear when I'm in the form designer, but not when I open the form on the app (tested Android & iOS). Any ideas or tips on this? 

Thanks for any help you can provide! We're on 365 if that changes anything

Userlevel 7
Badge +17

Images wont appear on the forms unless they are publicly available. Its a current "feature" that I cover ‌.

Colors will work, but try setting them in the control setting, highlight the text and set a color.

Your choice control should appear, after refreshing your forms you can also click the 'i' icon on the form itself at the bottom. This refreshed the form data. 

Reply