Style a Label with CSS

  • 23 June 2020
  • 2 replies
  • 237 views

Badge +10

I have a data label,  that i'm trying to set the font to horizontal.
I will have some text fields a user can fill out which would then populate a datalabel (for a check box) where the text is horizontal.

Let me start off by saying, I can not modify the primary CSS Files so I am stuck having to do this in a View.  With CSS or Script (and I'm no genious at JSS)

 

I found a forum post with the code, but can't get it to work on the label

The DataLabel - 
Name:ATV1
Text:  ATV One
Set to Literal
Expression Pointed to:  RotateText
<style>({-ms-transform: rotate(-90deg);-webkit-transform: rotate(-90deg); transform: rotate(-90deg); overflow:visible !important;position: relative; top:5 px;})</style>

Where am I going wrong? 

Is this possible?

Screenshot included


2 replies

Hi  @AAschenbrener 


 


Please try the following code in you expression after removing text:"AVT one".


 


Check Literal and uncheck the Prevent xss


 


Then put this code in the expression:


<html>
<head>
<style>
p {-ms-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
overflow:visible !important;
width: 0.5%;
position: relative; top:5 px;}
</style>
</head>
<body>


<p>ATV one</p>


</body>
</html>


 


after this add a transfer rule when the view initialize then tranfer the RotateText.


 


Note: The label name "ATV one" may not show fully to do its width, but you should be able to see its tooltip if you point to it using your mouse cursor.


 


Let me know if this helped


 


Regards


HulisaniN


 


 

Badge +10

This gets me SO much closer then I was, just need to get tweaking on it

 

However - the text box will be a data entry control where a user can type into the field.  I'll have 1 view - with 13 open text boxes a user can type in a name of a 'ATV'.  They click a 'Add New Record' and a different view opens up with the labels and check boxes. 
I'm looking to transfer whatever is typed into a datalabel that is displayed above a check box.  See Example.

I'll keep tinkering with it.  I'd like it to align to the bottom of the cell and automatically wrap / adjust width. 

 

Reply