In an effort to minimise the number of labels and textboxes that I need to put onto a page and map, I wanted to try to build a multi-line block of text where I can show many fields at once.
For example, if I have a dataset with a bunch of fields, I would like a way to display this to a user that looks something like:
This way I won’t need to drag, drop and map a label for each field.
In order to achieve this, I tried to use tabs “\t” and new lines “\n” in my expression when populating the label and it doesn’t work. I tried doing with via the expression editor as well as the js component and then populating the label text. It doesn’t seem to work.
I did notice that line breaks “\n” work when populating alerts.
Is there a reason as to why these operators are restricted on Stadium?
Please see a sample attached:
Our labels are rendered inside <span> tags that automatically collapse white space and line breaks. However, this default behaviour of <span> elements can quite easily be changed by setting the white-space CSS property on Labels inside of Stadium. See white-space - CSS: Cascading Style Sheets | MDN for more information around all the different values that are available to you.
To style your label to show linebreaks and whitespace, do the following:
Right-click the Label you want to style and select ‘Style’.
On the Styles editor add, ‘white-space: pre’ into the free text CSS area on the right
That is all there is to it. If you want to apply this to all labels throughout Stadium, you can add this setting to the Label under the ‘Types (classes)’ section. See the image below.
As an example, I applied this change to Label1 in your application and re-attached it. LineBreaks_Stadium5.sapz (6.7 KB)
P.S. In Stadium 6, only strings inside of expressions render out newlines.
I.e. instead of using the value This is a \nstring\nwith\nnew lines ,
use = "This is a \nstring\nwith\nnew lines"
as the value.
See the attached example. LineBreaks_Stadium6.sapz (6.9 KB)
Hi @anton.platzoeder ,
I’ve only just tried to look at the sample you sent, and unfortunately I cannot open it.
My stadium installation is up to date, yet it seems as though you are using a newer version (perhaps a nightly build):
Could you please send me screen grabs of the CSS and Expressions that you used along with a screen grab of the front-end rending the text correctly. I can’t seem to get the text to render properly – the fist letter is always prefixed by spaces that I didn’t put there.
You are right, I built it in the nightly build version. The next version will be released within the next couple of days, after which you would be able to open this file.
In the meantime, here are screenshots of Label1 and the styling of Label1 as requested.
From the above screenshot you can see that I do not get the extra whitespace before the string. Could it maybe be hidden characters that cause this on your end? Do you have a sample application that you could send me?
Please remember that inspecting the element in div tools will format the HTML to be easily read in the tree structure. If you look at the source, you will see that the text as it is being sent down. There you can see that the text is on the same line as the HTML tag.
Thanks I have found what seems to be the problem.
I am creating a class in css called ‘lbl-block’ since I want to reuse this class throughout my app whenever I need to display text preformatted.
When I use this class on my label, I get a line feed and white spaces before my data: The data that I get from the database is clean, no hidden chars or leading white spaces etc.
When I remove the class from the sylesheet and implement the white-space property by right-clicking on the element and manually capturing the style (per element) then it works perfectly.
I am not sure why this is the case. Please try it on your end to see the effect.
