Re: HTML looks different in explore tan in pure ht...

szaballa · 05-18-2025 08:55 AM

Why does the following HTML code in a LookML view display differently in a explore than in a pure HTML view?

Code:

measure: barra_test {
type: string
sql: 1 ;;
html:
<html>
<div style="position: relative; width: 100px; height: 20px; background-color: #e0e0e0; border: 1px solid #ccc; border-radius: 4px;">
<div style="position: absolute; top: 0; left: 0; height: 100%; width: 40%; background-color: #4CAF50; border-radius: 4px 0 0 4px;"></div>
<div style="position: absolute; top: 0; left: 51%; height: 100%; width: 4px; background-color: red;"></div>
</div>
<div style="font-size: 10px; text-align: center;">
40% avance / 51% del mes
</div>
</html>
;;
group_label: "Indicadores visuales"
}

View in Looker:

View same code in HTML:

Any ideas?

Thank you!

ruthc

Change the code for the child divs so they are floated:

  measure: barra_test {
    type: string
    sql: 1 ;;
    html:
    <html>
    <div style="position: relative; width: 100px; height: 20px; background-color: #e0e0e0; border: 1px solid #ccc; border-radius: 4px;">
    <div style="float: left; height: 100%; width: 40%; background-color: #4CAF50; border-radius: 4px 0 0 4px;"></div>
    <div style="float: left; height: 100%; width: 4px; background-color: red;"></div>
    </div>
    <div style="font-size: 10px; text-align: center;">
    40% avance / 51% del mes
    </div>
    </html>
    ;;
    group_label: "Indicadores visuales"
  }

szaballa

Hi ruthc,
Thanks for the reply.
It displays it in a single row, but incorrectly.
When you set the red bar's positioning to a percentage (e.g., left: 70%), it's drawn immediately after the top div, the progress div, in Looker. And in pure HTML, the bar is drawn at the beginning, at zero, since it has no positioning.

ruthc

Is this what you're trying to achieve?

If so, use this HTML instead:

  measure: barra_test {
    type: string
    sql: 1 ;;
    html:
    <html>
    <div style="position: relative; width: 100px; height: 20px; background-color: #e0e0e0; border: 1px solid #ccc; border-radius: 4px;">
    <div style="float: left; height: 100%; width: 40%; background-color: #4CAF50; border-radius: 4px 0 0 4px;"></div>
    <div style="margin-left: 51%; height: 100%; width: 4px; background-color: red;"></div>
    </div>
    <div style="font-size: 10px; text-align: center;">
    40% avance / 51% del mes
    </div>
    </html>
    ;;
    group_label: "Indicadores visuales"
  }

szaballa

Thanks a lot, ruthc!
I don't think there's a solution.
It displays it correctly now, but it doesn't work for my purposes, since what I'm trying to show is the progress against the goal (the green bar) and the red bar shows the number of days elapsed to see if the progress is on track compared to what's left.
The problem is that as it stands, if the progress exceeds the number of days, the red bar disappears, hidden by the progress bar.
Greetings and have a good week!

HTML looks different in explore tan in pure html