Warping the render value in Single Value Vis. via lookml html

I'm trying to make a tile in dashboard were value will be rendered through Look ML html via a single value vis,

Where the if the length of the name is longer it's not warping,

In ideal case should warp but it's going outside of the title.

Solved Solved
0 3 578
1 ACCEPTED SOLUTION

n_davis
Participant V

Some of this may not be needed in your case, but I’ve had success with this type of logic before: 

    html:
<div class="vis">
<div class="vis-single-value" style="line-height: 1;font-size: 20px; text-align:left;color:black;padding:12px" >
<br>
<span style="font-size: 20px;"> <font style="font-weight: normal;color:black;white-space: pre-line">
<font style="font-weight: bold;color:black;white-space: pre-line"> {{ other_dimension._rendered_value <br> </font>
<font style="font-weight: normal;color:black;white-space: pre-line">
<br>
{{ rendered value }}
</font>
</span>
</div>
</div>;;

Without an example of what lookml you’re using, I’m not sure if this is what is needed or not though.

View solution in original post

3 REPLIES 3

n_davis
Participant V

Some of this may not be needed in your case, but I’ve had success with this type of logic before: 

    html:
<div class="vis">
<div class="vis-single-value" style="line-height: 1;font-size: 20px; text-align:left;color:black;padding:12px" >
<br>
<span style="font-size: 20px;"> <font style="font-weight: normal;color:black;white-space: pre-line">
<font style="font-weight: bold;color:black;white-space: pre-line"> {{ other_dimension._rendered_value <br> </font>
<font style="font-weight: normal;color:black;white-space: pre-line">
<br>
{{ rendered value }}
</font>
</span>
</div>
</div>;;

Without an example of what lookml you’re using, I’m not sure if this is what is needed or not though.

Thanks Davis,  this code work 

here is the code that i have been used and thanks to you r suggestion it’s working fine now!

<div class="vis">
<div class="vis-single-value" style="line-height: 0.5; font-size: 18px; font-family: book-antiqua; text-align:left; color:#808080; padding:12px; ">
<div>
<img style="width: 250px; float:left; margin-left: 5px; margin-right: 15px;" src="https://looker.com/assets/img/images/homepage/looker_logo_meta_v0005.png">
</div>
<br>
<span style="padding-top: 85px;">
<font style="font-weight: bold; color:#808080; white-space: pre-line; line-height: 1;">
{{dimension.name}}
</font>
<font style="font-weight: normal; color:#808080; white-space: pre-line;">
{{rendered_value | date: "%m/%d/%Y"}}
</font>
</span>
</div>
</div>

Do looker have any doc or library for visualization class like:

class =”vis”

class =”vis-single-value”

Top Labels in this Space
Top Solution Authors