Closed vingerha closed 2 years ago
Minimal steps to reproduce:
# The least amount of code possible to reproduce my error # End of code
Unknown how to reproduce.
the card code
type: markdown
content: >
<div>Lessons florian</div>
<table>
{% set dates = state_attr('sensor.pronote_parent_fanny_lesson','date')%}
{% for i in range(0, dates | count, 1) %}
<tr>
{% if dates[i] > dates[i-1] %} <tr><td colspan="5"><b>{{
strptime(dates[i],"%Y/%m/%d").strftime("%A %d") }}</td></tr> {% endif %}
{%- if state_attr('sensor.pronote_parent_fanny_lesson','canceled')[i] == '0' -%}
<td>
<mark>
{{ dates[i].split('/',1)[1] }}</mark></td>
{% else %}
<td>
<span>
<del>{{ dates[i].split('/',1)[1] }}</span></td>
{%- endif -%}
<td>{{ state_attr('sensor.pronote_parent_fanny_lesson','start')[i] }}</td>
<td>{{ state_attr('sensor.pronote_parent_fanny_lesson','end')[i] }}</td>
<td>{{ state_attr('sensor.pronote_parent_fanny_lesson','subject')[i] }}
{% if state_attr('sensor.pronote_parent_fanny_lesson','status')[i] != 'nc' %}
<span>{{ state_attr('sensor.pronote_parent_fanny_lesson','status')[i] }}</td>
{% endif %}
<td>{{ state_attr('sensor.pronote_parent_fanny_lesson','room')[i]
}}</td>
{% endfor %}
card_mod:
style:
.: |
ha-card ha-markdown {
padding:0px
}
ha-card ha-markdown.no-header {
padding:0px
}
ha-markdown:
$:
ha-markdown-element: |
h1 {
font-weight: normal;
font-size: 24px;
}
div {
background-color:rgb(100, 100, 100);
padding: 12px 12px;
color:white;
font-weight:normal;
font-size:1.2em;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
table{
border-collapse: collapse;
font-size: 0.9em;
font-family: Roboto;
width: auto;
outline: 0px solid #393c3d;
margin-top: 10px;
} caption {
text-align: center;
font-weight: bold;
font-size: 1.2em;
} td {
padding: 5px 5px 5px 5px;
text-align: left;
border-bottom: 0px solid #1c2020;
}
tr {
border-bottom: 0px solid #1c2020;
}
tr:last-of-type {
border-bottom: transparent;
}
tr:nth-of-type(even) {
background-color: rgb(54, 54, 54, 0.3);
}
mark {
background: lightgreen;
border-color: green;
border-radius: 20px;
padding: 5px;
}
span {
background: orange;
color: #222627;
border-radius: 5px;
padding: 5px;
}
span {
padding: 5px;
}
tr:nth-child(n+2) > td:nth-child(2) {
text-align: left;
}
the content of the sensor, i.e. attributes are used for this card
date:
- 2022/05/09
- 2022/05/09
- 2022/05/09
- 2022/05/09
- 2022/05/09
- 2022/05/09
- 2022/05/10
- 2022/05/10
- 2022/05/10
- 2022/05/10
- 2022/05/10
- 2022/05/11
- 2022/05/11
- 2022/05/11
- 2022/05/12
- 2022/05/12
- 2022/05/12
- 2022/05/12
- 2022/05/13
- 2022/05/13
- 2022/05/13
- 2022/05/13
start:
- '09:00'
- '10:00'
- '11:00'
- '13:30'
- '14:30'
- '15:30'
- '10:00'
- '11:00'
- '13:30'
- '14:30'
- '15:30'
- '09:00'
- '10:00'
- '11:00'
- '08:00'
- '10:00'
- '11:00'
- '13:30'
- '08:00'
- '09:00'
- '10:00'
- '13:30'
end:
- '10:00'
- '11:00'
- '12:00'
- '14:30'
- '15:30'
- '16:30'
- '11:00'
- '12:00'
- '14:30'
- '15:30'
- '17:30'
- '10:00'
- '11:00'
- '12:00'
- '10:00'
- '11:00'
- '12:00'
- '14:30'
- '09:00'
- '10:00'
- '12:00'
- '15:30'
subject:
- FRANCAIS
- HISTOIRE-GÉOGRAPHIE
- MATHÉMATIQUES
- SCIENCES DE LA VIE ET DE LA TERRE
- ANGLAIS LV1
- ÉDUCATION PHYSIQUE ET SPORTIVE
- MATHÉMATIQUES
- FRANCAIS
- LATIN
- ANGLAIS LV1
- HISTOIRE-GÉOGRAPHIE
- ARTS PLASTIQUES
- FRANCAIS
- EPI (big data)
- MATHÉMATIQUES
- FRANCAIS
- MUSIQUE
- TECHNOLOGIE
- LATIN
- ANGLAIS LV1
- ÉDUCATION PHYSIQUE ET SPORTIVE
- EPI (danse)
canceled:
- '0'
- '0'
- '0'
- '0'
- '0'
- '0'
- '0'
- '0'
- '0'
- '0'
- '0'
- '0'
- '0'
- '0'
- '0'
- '0'
- '0'
- '0'
- '0'
- '0'
- '0'
- '0'
status:
- nc
- nc
- nc
- nc
- nc
- nc
- nc
- nc
- nc
- nc
- nc
- nc
- nc
- nc
- nc
- nc
- nc
- nc
- nc
- nc
- nc
- nc
room:
- '105'
- '206'
- '207'
- Labo 2
- '103'
- Piscine municipale
- '207'
- '105'
- '101'
- '103'
- '206'
- '205'
- '105'
- nc
- '207'
- nc
- Salle de musique
- '105'
- '101'
- '102'
- Piscine municipale
- Piscine municipale
friendly_name: pronote PARENT_Fanny lesson
OMG. For testing people usually providing MWE - a small code snippet.
I understand but that would mean a lot more work...this is just copy paste. The data shows immediately with ootb colouring (white+yellow), then 'my' css applies and that takes ages since 3.1.1
To replicate:
reduced the sensor / data
date:
- 2022/05/09
- 2022/05/09
start:
- '09:00'
- '10:00'
end:
- '10:00'
- '11:00'
subject:
- FRANCAIS
- HISTOIRE-GÉOGRAPHIE
canceled:
- '0'
- '0'
status:
- nc
- nc
room:
- '105'
- '206'
friendly_name: pronote PARENT_Fanny lesson
Another small code example for testing;
type: markdown
content: |
# {{ now().strftime(" %I:%M")}}
card_mod:
style:
ha-markdown:
$: |
h1 {
text-align: center;
font: Roboto;
font-size: 6em;
font-weight: 400;
}
Style doesn't update until you go back in to edit the Markdown at which point the style updates immediately in the preview and also in the Dashboard after hitting "cancel".
If I clear cookies/cache the style goes away again.
vs
@xvlw
Do not confirm, the style is applied immediately after opening a page. No flickering, no loosing the style.
Checked with your "#" example + my "h1" example.
type: vertical-stack
cards:
- type: markdown
content: '# {{ now().strftime(" %I:%M")}}'
card_mod:
style:
ha-markdown $: &ref_style |
h1 {
color: red;
text-align: center;
font: Roboto;
font-size: 2em;
font-weight: 400;
}
- type: markdown
content: <h1>{{ now().strftime(" %I:%M")}}</h1>
card_mod:
style:
ha-markdown $: *ref_style
@ildar170975
Put your code into a Manual card and it updates correctly. Mine must have been a formatting issue.
Do you want me to delete my comments/posts to clean this up?
Put your code into a Manual card and it updates correctly
Sorry, I do not understand. What is a Manual card? My example updates correctly.
*I inserted your code into a card and it worked. My issue was likely formatting.
for me still no cigar, other than with 3.1.1 I tried with edge and chrome on two laptops, refreshed cache, used incognito ... all the same Setup: 2022.6.1. A separate dashboard, 3 views, views only contain markdown cards, the third view only the above clock example card With 3.1.1
With 3.1.2
With 3.1.3. and 3.1.4
With 3.1.5
EDIT: I also see the same behavior when just switching versions without refreshing cache... from 3.1.5 to 3.1.1...fine again, back to 3.1.5...not
I can confirm this behaviour with 3.1.5
The style is not applied until you switch to another view and then return to the original view. Changing between dashboards is the same, you have to switch views and then revert back, to get the style to apply and stick
This bug manifests itself across browsers (Edge, IE, Chrome) and even the Companion App
Markdown card yaml
type: markdown
content: |
# {{ states('sensor.local_time')}}
card_mod:
style:
ha-markdown:
$: |
h1 {
text-align: center;
font-size: 19px;
}
@Duke-Box Check my example: https://github.com/thomasloven/lovelace-card-mod/issues/204#issuecomment-1149183795 To solve the issue - use
ha-markdown $: |
instead of
ha-markdown:
$: |
as here:
type: markdown
content: |
# {{ states('sun.sun')}}
card_mod:
style:
ha-markdown $: |
h1 {
text-align: center;
font-size: 10px;
}
Not working for me but mine is a bit more complex ..
card_mod:
style:
.: |
ha-card ha-markdown {
padding:0px
}
ha-card ha-markdown.no-header {
padding:0px
}
ha-markdown $:
ha-markdown-element: |
card_mod:
style:
.: |
ha-card ha-markdown {
padding:0px
}
ha-card ha-markdown.no-header {
padding:0px
}
ha-markdown:
$:
ha-markdown-element: |
@ildar170975
Thanks - that worked for me, on all my markdowns. Some are more complex than the example I posted.
@vingerha Here is an example of one of mine with padding etc.
type: markdown
content: |
# {{ states('sensor.local_time')}}
### {{ states('sensor.local_date')}}
card_mod:
style:
.: |
ha-card {
padding: 45px;
height: 95px;
}
ha-markdown $: |
h1 {
text-align: center;
font-size: 70px;
}
h3 {
text-align: center;
font-size: 20px;
color: var(--state-icon-color);
}
@vingerha Both your examples need to be corrected. 1st code MAY work - but it is better to replace accordingly to: https://github.com/home-assistant/frontend/issues/12920#issuecomment-1150924503
card_mod:
style:
ha-markdown $: |
h1 {
.....
}
.: |
ha-card {
.....
}
-- just to avoid any issues & make a code more clear, more adjustable.
2nd example - just wrong.
@Duke-Box same is for you
@ildar170975
Thanks for the answer. Are you saying the order is important? My code works even though the sections are reversed! Or is there something else I'm missing?
Thanks again
type: markdown
content: |
# {{ states('sensor.local_time')}}
### {{ states('sensor.local_date')}}
card_mod:
style:
.: |
ha-card {
padding: 45px;
height: 95px;
}
ha-markdown $: |
h1 {
text-align: center;
font-size: 70px;
}
h3 {
text-align: center;
font-size: 20px;
color: var(--state-icon-color);
}
your example:
card_mod:
style:
ha-markdown $: |
h1 {
.....
}
.: |
ha-card {
.....
}
Are you saying the order is important?
Repeat - to avoid any issues. Check this - https://github.com/thomasloven/lovelace-card-mod#dom-navigation
Not to mention that proposed way is more traditional.
@ildar170975
Ok - got it. Thanks again for your help.
With the suggested fixes above, I am totally fine now...thanks a lot. In my case: clearly not knowing all the ins/outs of this setup did not help identifying the issues....or even contributed creating them. All in all I think it is great to offer all this flexibility but for low-level knowledge people like me it becomes a fog and no clue where to look. So, I am grateful to you all having spent time on this and will try to be more inward looking a next time. THANKS!!!
My best wishes to all of you guys
My Home Assistant version: 2022.6 (also noted with 2022.4.3)
My lovelace configuration method (GUI or yaml): yaml
What I am doing: combining sensor data via markdown and layout via cardmod
What I expected to happen: opening the dashboard view should format along css in <1 sec
What happened instead: format > 10 sec or sometimes never Observations,
Minimal steps to reproduce:
Error messages from the browser console:
By putting an X in the boxes ([]) below, I indicate that I:
[X] Understand that this is a channel for reporting bugs, not a support forum (https://community.home-assistant.io/).
[] Have made sure I am using the latest version of the plugin.
[X] Have followed the troubleshooting steps of the "Common Problems" section of https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins.
[X] Understand that leaving one or more boxes unticked or failure to follow the template above may increase the time required to handle my bug-report, or cause it to be closed without further action.