search

junalmeida / homeassistant-minimalistic-area-card

A minimalistic area card with sensors and buttons.
MIT License
107 stars 10 forks source link

[Bug]: Air Quality wrong alignment #99

Open cermakjn opened 2 months ago

cermakjn commented 2 months ago

What happened?

State Icons in the Area Card are fine except the Air Quality one which has always wrong alignment, see attached images:

image

HTML looks pretty fine, problem should be with the icon mdi:air-filter (default one for the Air Quality):

<div class="sensors">
                    <!--?lit$809022389$--><!---->
    <div class="wrapper">
        <ha-icon-button class=" state-on ">
            <state-badge title="Bedroom Weather Station Temperature: 21.7 °C" class="  " icon=""></state-badge>
        </ha-icon-button>
        <!--?lit$809022389$-->
        <div class="state">
            <!--?lit$809022389$-->21.7 °C
        </div>

    </div>
    <!----><!---->
    <div class="wrapper">
        <ha-icon-button class=" state-on ">
            <state-badge title="Bedroom Weather Station Humidity: 35.0 %" class="  " icon=""></state-badge>
        </ha-icon-button>
        <!--?lit$809022389$-->
        <div class="state">
            <!--?lit$809022389$-->35 %
        </div>

    </div>
    <!----><!---->
    <div class="wrapper">
        <ha-icon-button class=" state-on ">
            <state-badge title="Bedroom Weather Station Carbon Dioxide: 549.0 ppm" class="  " icon=""></state-badge>
        </ha-icon-button>
        <!--?lit$809022389$-->
        <div class="state">
            <!--?lit$809022389$-->549 ppm
        </div>

    </div>
    <!----><!---->
    <div class="wrapper">
        <ha-icon-button class=" state-on ">
            <state-badge title="Bedroom Weather Station Noise: 33 dB" class="  " icon=""></state-badge>
        </ha-icon-button>
        <!--?lit$809022389$-->
        <div class="state">
            <!--?lit$809022389$-->33 dB
        </div>

    </div>
    <!----><!---->
    <div class="wrapper">
        <ha-icon-button class=" state-on ">
            <state-badge title="Bedroom Weather Station Air Quality: 2" class="  " icon=""></state-badge>
        </ha-icon-button>
        <!--?lit$809022389$-->
        <div class="state">
            <!--?lit$809022389$-->2
        </div>

    </div>
    <!----><!---->
    <div class="wrapper">
        <ha-icon-button class="  ">
            <state-badge title="Bedroom Right Window: off" class="  " icon=""></state-badge>
        </ha-icon-button>
        <!--?lit$809022389$-->
        <div class="state">
            <!--?lit$809022389$-->
        </div>

    </div>
    <!---->
                </div>

Card Version

v1.1.16

Home Assistant Version

2024.4.3

Browser Version

Chrome Linux 124.0.6367.60

Relevant javascript log output

No response

cermakjn commented 2 months ago

During the debug I found out that the issue is connected with a missing unit of the Air Quality. When I edit the value in HTML from "2" to "2 something" it works correctly. However, there is no unit for this value.

junalmeida commented 2 months ago

Hmm interesting.... Is the missing unit a bug in your system or a common thing for all Air Quality sensors? I don't have one.

stale[bot] commented 1 month ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

OmenBoy commented 1 month ago

I have the same issue and it's only with this add on.

stale[bot] commented 1 day ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.