Using line breaks in labels

Hi,

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:

image

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:

LineBreaks.sapz (6.7 KB)

Hi Nem,

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:

  1. Right-click the Label you want to style and select ‘Style’.
    image

  2. 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.sapz (6.7 KB)

1 Like

Hi Anton, this is really good to know as it will save us a lot of time!
Thank you for assisting us with this

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.

I figured it out, it seems that you need to start the code in line with the tag:

This is really annoying.
I can see how the line of text is not inline with the tag in the HTML:

Hi Nem,

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.



The spaces you see are due to the space you have after the ‘\n’. Remove these and it should render without the spaces.

I.e. Change

= "Multi-line using  \n the new line operator doesn't  \n seem to work"

to

= "Multi-line using  \nthe new line operator doesn't  \nseem to work"

If you do that, you will get the result as seen below

Please let me know if you need anything else.

Hi Nem,

I added a Panel. Then added a Label into the panel and set the text to:

Full Name:	Gerald SS Hommuster
Date of Birth:	1976-09-12T00:00:00
South African ID Number:	86959949930

Lastly I went to the Styling of the Label and set the css to:

Previewing it resulted in the following:

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.

Hi Anton,

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:
image
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.