How can I add styling like font color, italics, etc to my forms?

Not sure where to put this; it's not a document per se - it is an example form of formatting that may be of use to others. The attached form (ODK1) gives 14 examples of html and markdown used to format an ODK Collect form.
Most of the information is already available on the Nafundi website, I just find it useful to have on my device in a form.

MarkdownExamples.xlsx (26.4 KB)
MarkdownExamples.xml (9.4 KB)

5 Likes

Thanks, @DavidM, this is great! I've split it out into its own question so it's more likely to come up if anyone searches for styling examples. Feel free to modify the title if you come up with a better one.

I've also filed an issue for the documentation to incorporate your example form. https://github.com/opendatakit/docs/issues/627

2 Likes

This is a great initiative! Thanks @DavidM
Is there a way that this markdown form could be compatible with Enketo too?

It probably is compatible. Have you tried?

Hi Pierre - It will work with Enketo as this utilises the same XForm base and basic mobile client. I built this with XLSForm which is also recommended by Enketo.

Hi!
@yanokwa and @DavidM
The compatibility is not full, especially for choices.
See here: https://ee.humanitarianresponse.info/preview/::YKAl
The paragraph "Formatting works on labels for Choices also."

i posted an issue on GitHub

2 Likes

Thanks Pierre,
I will update the thread with the info. Weirdlg it looks like some of the basic html isn't working (such as
). It might be worth you sharing your results on their forum to get a response? You have got a few formatting options at least :slight_smile:

Just reviving this thread as I was trying to format choices for ODK Collect (v1.18.1) and it is not working. Tried also to preview in Enketo through the XML generated from https://opendatakit.org/xlsform/ and it's not working either. Has the markdown for choices been fixed?

Hi @techGus

could you attach your form? We had a bug with styling choices in v1.18.0 but i's fixed in v1.18.1 so everything should be fine.

@Grzesiek2010

I just found out that the issue is with the compact appearance tag. When I removed it, the colors showed as expected. Enabling the compact appearance makes the label show with all the HTML.

Not sure if this is an expected behavior or if this was overlooked and the documentation doesn't specifically say that colors for choices only works for the normal list appearance.

You are right that's an issue with the compact appearance. We have never supported form styling with the compact appearance. I'll file an issue in our repository.

Do you really need to use styling with the compact appearance or it's just a bug you have run into accidentally?

A post was split to a new topic: Background image on screen

Hi, just to flag that we would find it useful to use styling with the compact appearance, and that the issue remains with latest version. Thanks

I am having an issue styling my application form. I want to add line breaks and perhaps underline some of the text. I read online that may be used which is not working. I also tried setting text-decoration to underline in a span's style and that worked on the web preview but not on the android ODK application. Can anyone guide me on how one might underline a portion of text? And also is there any way to explicitly add a line break to a paragraph. The break tag does not seem to work. I am adding these changes in the label column on an xls form.

Hi @azam_iqbal,

Have you looked at the sample in form-styling?

Check it closely, is has all formatting that you can do

I already check please make a xls form in which we underline some text in question

Hi @azam_iqbal, just download the sample form and check, making another one is just duplication.

Line break i do ALT+ENTER this work prefectly through excel but i found below issue
where write code underline i want my text in label column underline
like
DISTRICT%20UNDERLINE

As suggested, if you download the sample form, examples are contained. Line breaks are easily represented using basic html such as <br> , underlining can be done in the same way.

Really worth downloading the sample from referenced above and looking at the examples in it.

2 Likes