HTML rendering in new dashboards

haleyb
Participant III

Has anyone else had issues with HTML rendering differently in the new dashboard experience? The spacing looks totally different from how it appears in our legacy dashboards. The example below shows the exact same tile in legacy vs new for version 21.6.39. The divs and line breaks get so much additional spacing that the tabs are no longer visible. Curious if anyone has a fix for this before I start redoing all of our HTML parameters. 

Legacy Dashboard:

b203fac6-8c36-400a-a786-1f1428dcdb5e.png

New Dashboard:

6b0f2540-7204-4cea-95fb-f6c0d55b654f.png
Solved Solved
0 5 936
1 ACCEPTED SOLUTION

n_davis
Participant V

Which viz type is this? Is it a single value viz? I’ve used this logic before for a single value viz: 

html: <div class="vis">
<div class="vis-single-value" style="line-height: 1;font-size: 17px; text-align:center;color:black;" >
</div>
</div>;;

View solution in original post

5 REPLIES 5

n_davis
Participant V

Which viz type is this? Is it a single value viz? I’ve used this logic before for a single value viz: 

html: <div class="vis">
<div class="vis-single-value" style="line-height: 1;font-size: 17px; text-align:center;color:black;" >
</div>
</div>;;

minerkt
Participant IV

@haleyb , I have had similar spacing issues and done some work to change the style parameter for each HTML element, specifically changing padding and margin to 0px.

@n_davis , I have played around with the HTML parameter in dimensions and measures within Looker, can you explain any benefit from using the class parameter?

Normal HTML, I use them all of the time especially with sharing style options, but in Looker, I have to rewrite the style property for every element and would love to not have to do that.

n_davis
Participant V

@minerkt I found that with the new dashboards I had to add this logic for more than 2 rows in a single value viz to format right. I didn’t have this problem with legacy dashboards. Without this logic, the visual would space everything out (and sometimes outside of the view) which I didn’t want. You have to define the class that it is a vis and that the vis is a single value vis if you want the formatting to turn out right for a multi-line html logic. It is possible that there are other workarounds, this is just what I found to work.

haleyb
Participant III

Thanks @n_davis and @minerkt! Wrapping everything in a div with line-height:1 fixed a lot of it. I also added letter-spacing:0px to fix the close spacing between letters. I didn’t need to add the classes for it to work in my example.

The other issue I’ve noticed is that Font Awesome icons no longer show up. I saw a couple other threads about this issue, but no resolution.

haleyb
Participant III

Update on the Font Awesome issue - Looker has confirmed that it is no longer supported in the new dashboards.

Top Labels in this Space
Top Solution Authors