thomasloven / lovelace-card-mod

🔹 Add CSS styles to (almost) any lovelace card
MIT License
1.08k stars 168 forks source link

Styles may NOT be applied to Conditional row/element #201

Open ildar170975 opened 2 years ago

ildar170975 commented 2 years ago

My Home Assistant version: 2022.5.4 Chrome, Win10. Safary, OS X 10.15.1.

My lovelace configuration method (GUI or yaml): storage/yaml

What I am doing: Applying a style to conditional row inside Entities card.

What I expected to happen: The style is applied always.

What happened instead: The style sometimes is not applied.

The problem was also described in the Community card-mod thread:

Minimal steps to reproduce:

  1. Create a new card:
    type: vertical-stack
    cards:
    - type: entities
    entities:
      - input_boolean.test_boolean
    - type: entities
    entities:
      - sun.sun
      - type: conditional
        conditions:
          - entity: input_boolean.test_boolean
            state: 'on'
        row:
          entity: sun.sun
          icon: 'mdi:desk-lamp'
          name: Nählicht Lampe
        card_mod:
          style:
            hui-text-entity-row $: |
              hui-generic-entity-row {
                text-indent: 45px;
                color: red;
              }
      - entity: sun.sun
  2. Refresh the page.
  3. Set the toggle to OFF.
  4. Check if the conditional row is NOT displayed: изображение
  5. Set the toggle to ON.
  6. Refresh the page.
  7. Check if the conditional row is displayed and properly styled: изображение

So far it should work fine. Now a problem part:

  1. Set the toggle to OFF.
  2. Check if the conditional row is NOT displayed.
  3. Refresh the page.
  4. Set the toggle to ON.
  5. Check if the conditional row is displayed and properly styled. What I see is - the row is NOT styled: изображение
  6. Refresh the page.
  7. Check if the conditional row is displayed and properly styled. What I see - the row IS styled.

Error messages from the browser console: No.

By putting an X in the boxes ([]) below, I indicate that I:

ildar170975 commented 2 years ago

Good work, Thomas!

PronkMedia commented 2 years ago

I have tested it yesterday, and it still is (seemingly randomly) failing for me. Especially on first load, then after e.g. changing tabs or rotating my phone the styles are applied correctly.

@ildar170975 Did you test the latest version already? Did it solve everything for you? The reason I'm asking is that I'm wondering if I'm encountering a bug that is just very spicific to my personal configuration right now.

Not sure if it will help, but this is one of the configrations where I am encountering it: https://raw.githubusercontent.com/PronkMedia/Home-Assistant-Config/master/lovelace/views/home.yaml So in this file for example the rotation of the icons is not always applied on first load.

ildar170975 commented 2 years ago

Did you test the latest version already?

Yes, right now I rechecked it with HA 2022.6.1 & card-mod 3.1.5. Win10x64, Chrome. Works OK.

iPhone 5S, iOS 12.5.5 iPad Air 2, iOS 15.4 Style is NOT applied after refresh. Exactly what is described here: изображение

My fault. Did not check it with iOS. Frankly speaking - iOS Companion App seems too buggy for me, do not use usually...

PronkMedia commented 2 years ago

Many thanks for your quick reply @ildar170975! That case is indeed still failing for me too. So if a conditional row is/should be displayed on initial page load, the style is not applied for me. I can reproduce it on desktop (latest Chrome) with hard refreshing the page and on Android mobile browser (latest Chrome).

@thomasloven Could you please consider re-opening this issue? As it looks like this is not completely fixed.

ildar170975 commented 1 year ago

Did not check it with iOS.

For the record:

  1. Still works fine in Win10+Chrome, 2023.8, card-mod 3.2.2.
  2. Same with iOS 15.7.7, iPad Air 2 - works fine.
type: vertical-stack
title: conditional row (Problem 142)
cards:
  - type: entities
    entities:
      - input_boolean.test_boolean
  - type: entities
    entities:
      - sun.sun
      - type: conditional
        conditions:
          - entity: input_boolean.test_boolean
            state: 'on'
        row:
          entity: sun.sun
          icon: mdi:desk-lamp
          name: Lamp
        card_mod:
          style:
            hui-simple-entity-row $: |
              hui-generic-entity-row {
                text-indent: 45px;
                color: red;
              }
      - entity: sun.sun
ildar170975 commented 9 months ago

Please reopen. Still there are issues with a conditional element in Picture elements card (PE):

Here is a PE card has 1 conditional element. Usually it looses its styling after a page refresh. изображение

type: picture-elements
image: /local/images/test/white.jpg
elements:
  - type: conditional
    conditions:
      - entity: input_boolean.test_boolean
        state: 'on'
    elements:
      - type: state-label
        entity: sun.sun
        style:
          top: 17%
          left: 75%
    card_mod:
      style:
        hui-state-label-element:
          $: |
            div {
              color: red;
            }

Observed in 2023.10.2 + card-mod 3.2.3: -- Win10+Chrome (118.0.5993.118); -- iOS Companion App (iOS 15.x).

Note that it happens when we need to go into shadowRoot. If we do not - the style is STABLE (but another problem occurs).

curtisbarnard commented 7 months ago

I think I'm see this issue in the entities card as well. Here is the card I have: image

Here is the DOM structure: image

I've tried using :host, hui-conditional-row $ and hui-sensor-entity-row $ in the below code. Nothing seems to work to change the icon color:

          - type: conditional
            conditions:
              - entity: sensor.cph50_charging_cable
                state: "Plugged In"
            row:
              entity: sensor.cph50_charger_state
              name: "Charging Status"
              card_mod:
                style:
                  hui-conditional-row$: |
                    hui-generic-entity-row {
                      --card-mod-icon-color: var(--blue-color);
                    }
ildar170975 commented 7 months ago
  1. Here the card-mod code is misplaced, DOM path is wrong, the code is not supposed to work:
            row:
              entity: sensor.cph50_charger_state
              name: "Charging Status"
              card_mod:
                style:
                  hui-conditional-row$: |

    Scroll up a bit for a working code with Conditional row.

  2. There is another registered issue with --card-mod-icon-color.
curtisbarnard commented 7 months ago

@ildar170975 you were right, thanks for the help! I'm using this code and getting the results I want:

          - type: conditional
            conditions:
              - entity: sensor.cph50_charging_cable
                state: "Plugged In"
            row:
              entity: sensor.cph50_charger_state
              name: "Charging Status"
            card_mod:
              style:
                hui-sensor-entity-row $: |
                  hui-generic-entity-row {
                  {% if is_state('sensor.cph50_charger_state', 'Not Charging') or is_state('sensor.cph50_charger_state', 'In Use') %}
                    --card-mod-icon-color: var(--blue-color);
                  {% elif is_state('sensor.cph50_charger_state', 'Fully Charged') %}
                    --card-mod-icon-color: var(--success-color);
                  {% else %}
                    --card-mod-icon-color: var(--state-unavailable-color);
                  {% endif %};
                  }

image

ildar170975 commented 7 months ago

@curtisbarnard Good, but check if that issue with "--card-mod-icon-color" is observed. Hopefully it had been fixed already.

Wetzel402 commented 5 days ago

I think I may be dealing with this bug also.

type: conditional
conditions:
  - condition: state
    entity: sensor.mealie_1_name
    state_not: unknown
card:
  type: custom:config-template-card
  variables:
    DAY: states['sensor.mealie_1_day'].state
    TYPE: states['sensor.mealie_1_type'].state
    ID: states['sensor.mealie_1_id'].state
  entities:
    - sensor.mealie_1_day
    - sensor.mealie_1_type
    - sensor.mealie_1_id
  card:
    type: picture-entity
    show_state: true
    show_name: true
    camera_view: auto
    entity: sensor.mealie_1_name
    name: ${TYPE[0].toUpperCase() + TYPE.slice(1) + " " + DAY}
    camera_image: camera.mealie_1_image
    tap_action:
      action: url
      url_path: ${"https://foobar.com/g/home/r/" + ID}
  card_mod:
    style: |
      ha-card {
      max-height: 300px !important;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      }