HTML rendering in new dashboards

  • 19 November 2021
  • 5 replies

Userlevel 2

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:

New Dashboard:



Best answer by n_davis 22 November 2021, 15:54

View original

This topic has been closed for comments

5 replies

Userlevel 1

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;" >


Userlevel 3

@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.

Userlevel 1

@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.

Userlevel 2

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.


Userlevel 2

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