Centering a Label in a Panel

[anton.platzoeder]

It has happened quite often that users want to create a type of dashboard and have blocks with informational numbers in them. An example of such a block can be seen below:

We are currently working on extensive changes to how you style your application in Stadium. These changes will drastically improve flexibility but, at the same time, simplify customizing the look and feel of how controls render on the webpage.

But until then, this is how you center a label in a panel:

1. Select the application node in the App Explorer and check the StyleSheet checkbox. This will activate the StyleSheet in your application.
   

   

2. Open the StyleSheet by selecting it in the App Explorer
   

   

3. The label control container needs to be styled in order to center the Label in a Panel. (See the image below)
   

   
   
   Before adding the style to the StyleSheet, we will need to determine the runtime id of the control container. All runtime control IDs are constructed in the same way: _-container.
   E.g. In our example app, Label1 on the StartPage would have the runtime ID of StartPage_Label1-container

4. Now that we have the runtime ID we can paste the following CSS into the Stylesheet:

#StartPage_Label1-container {
    display: block;
    text-align: center;
}

5. Preview the application

Download and look at the sample application to see the final result. (P.S. Use Stadium 6 to open the sample application)

CenterLabelInPanel.sapz (5.4 KB)

I hope this helps! Happy building in Stadium 6!