How to apply "advanced" formatting to Piped Text? | XM Community
Skip to main content

Hi,
in the project I am currently building, a number of 150 digits is generated at some point. The number is generated within JavaScript and then set to an embedded data field.
In what follows I need to show the 150 digits in N rows.
For example, assume the number is of 10 digits (1000011100) and I want to show it in 5 rows. Then I would like it to look like:
10
00
01
11
00
Now, with my extremely limited understanding of HTML, I thought that would be possible creating some class that sets a limit in max-width, but I do not seem to be able to create a new class using the "Custom CSS" in "Look and Feel - Style".
Here's what I added in the "Custom CSS":
p.ex1 {
 max-width: 150px;
}
And here's what I have in my question HTML view:

${e://Field/n}


Does anyone know why this does not work and how to solve this issue? Also any other workaround would be great.

Thanks!

Do you want your string to break/wrap after every two characters?
max-width isn't the correct property for this purpose. To do it with CSS and have it work across all browsers is kind of complicated and you would probably have to use a monospaced font.
You could do it with JS and have it insert


tags every two characters.

TomG Thanks a lot for your answer, that works perfectly!
As I believe this is still in the question topic:
I would also like to set a frame around the variable. Is it possible to do it through code, such that the dimension of the frame is adapted to the length of the number?

https://www.qualtrics.com/community/discussion/comment/35584#Comment_35584You can put a border around your paragraph:

${e://Field/n}


TomG, great! Thanks a lot!

Leave a Reply


Terms & Conditions