Issue with currentText layout about bom-weather-card

[davidmonro]

Argh. Think I've figured it out - looks like it might be a bad interaction with the "custom header" custom integration :(

Sorry for wasting your time.

[DavidFW1960]

Hi there... can you give me your lovelace configuration for the card? That text can be moved around so it doesn't do that. See the example lovelace.yaml file which has styles that replicate the graphic in the repo readme file.

I'm sorry I didn't get a notification about this issue and only noticed today when I pushed a style update for version 0.109 of HA.

[DavidFW1960]

OK... I added the console as well so now it will show the card version in the console. Fingers crossed I didn't break anything else eh!!

[davidmonro]

Hi, here's the config, I'm not setting positions on anything: - entity_apparent_temp: sensor.bom_canberra_feels_like_c entity_current_conditions: sensor.bom_canberra_icon_0 entity_current_text: sensor.bom_current_text entity_daily_summary: sensor.bom_canberra_detailed_summary_0 entity_daytime_high: sensor.bom_today_max entity_daytime_low: sensor.bom_today_min entity_fire_danger: sensor.bom_fire_danger entity_fire_danger_summary: sensor.bom_fire_danger_summary entity_forecast_high_temp_1: sensor.bom_canberra_max_temp_c_1 entity_forecast_high_temp_2: sensor.bom_canberra_max_temp_c_2 entity_forecast_high_temp_3: sensor.bom_canberra_max_temp_c_3 entity_forecast_high_temp_4: sensor.bom_canberra_max_temp_c_4 entity_forecast_high_temp_5: sensor.bom_canberra_max_temp_c_5 entity_forecast_icon_1: sensor.bom_canberra_icon_1 entity_forecast_icon_2: sensor.bom_canberra_icon_2 entity_forecast_icon_3: sensor.bom_canberra_icon_3 entity_forecast_icon_4: sensor.bom_canberra_icon_4 entity_forecast_icon_5: sensor.bom_canberra_icon_5 entity_forecast_low_temp_1: sensor.bom_canberra_min_temp_c_1 entity_forecast_low_temp_2: sensor.bom_canberra_min_temp_c_2 entity_forecast_low_temp_3: sensor.bom_canberra_min_temp_c_3 entity_forecast_low_temp_4: sensor.bom_canberra_min_temp_c_4 entity_forecast_low_temp_5: sensor.bom_canberra_min_temp_c_5 entity_humidity: sensor.bom_canberra_relative_humidity entity_pop: sensor.bom_canberra_chance_of_rain_0 entity_pop_1: sensor.bom_canberra_chance_of_rain_1 entity_pop_2: sensor.bom_canberra_chance_of_rain_2 entity_pop_3: sensor.bom_canberra_chance_of_rain_3 entity_pop_4: sensor.bom_canberra_chance_of_rain_4 entity_pop_5: sensor.bom_canberra_chance_of_rain_5 entity_pop_intensity: sensor.bom_canberra_rain_today entity_pos_1: sensor.bom_canberra_possible_rainfall_1 entity_pos_2: sensor.bom_canberra_possible_rainfall_2 entity_pos_3: sensor.bom_canberra_possible_rainfall_3 entity_pos_4: sensor.bom_canberra_possible_rainfall_4 entity_pos_5: sensor.bom_canberra_possible_rainfall_5 entity_possible_today: sensor.bom_canberra_possible_rainfall_0 entity_pressure: sensor.bom_canberra_pressure_msl entity_summary_1: sensor.bom_canberra_summary_1 entity_summary_2: sensor.bom_canberra_summary_2 entity_summary_3: sensor.bom_canberra_summary_3 entity_summary_4: sensor.bom_canberra_summary_4 entity_summary_5: sensor.bom_canberra_summary_5 entity_sun: sun.sun entity_temperature: sensor.bom_canberra_air_temp_c entity_uv_alert: sensor.bom_uv_alert entity_uv_alert_summary: sensor.bom_uv_alert_summary entity_visibility: sensor.bom_canberra_visability_km entity_wind_bearing: sensor.bom_canberra_wind_direction entity_wind_speed: sensor.bom_canberra_wind_speed_kmh static_icons: true title: BOM Weather tooltips: true type: 'custom:bom-weather-card' It is inside a vertical stack inside a horizontal stack inside a vertical stack I think, but I noticed the same issue with it just as a normal floating card. Cheers David

…

On Fri, 1 May 2020 at 12:03, DavidFW1960 ***@***.***> wrote: Hi there... can you give me your lovelace configuration for the card? That text can be moved around so it doesn't do that. See the example lovelace.yaml file which has styles that replicate the graphic in the repo readme file. I'm sorry I didn't get a notification about this issue and only noticed today when I pushed a style update for version 0.109 of HA. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#11 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAH62DSNSV5ERMWLD6MWE23RPIUWJANCNFSM4MTJCXWQ> .

[DavidFW1960]

Can you try these style settings?

            locale: en
            sunset: true
            static_icons: false
            old_icon: "hybrid"
            tooltip_bg_color: 'rgb( 75,155,239)'
            tooltip_border_color: 'rgb(255,161,0)'
            tooltip_border_width: 1
            tooltip_caret_size: 5
            tooltip_fg_color: '#fff'
            tooltip_left_offset: -12
            tooltip_width: 110
            tooltips: true
            old_daily_format: false
            time_format: 12
            show_beaufort: false
            refresh_interval: 60
            show_separator: false
            temp_top_margin: 0px            #default 0px px or em Note: pre-0.109.x default was -0.3em
            temp_font_weight: 300           #default 300 numeric
            temp_font_size: 4em             #default 4em em
            temp_right_pos: 0.85em          #default .85em px or em
            temp_uom_top_margin: -12px      #default -12px px or em Note: pre-0.109.x default was -9px
            temp_uom_right_margin: 7px      #default 7px px or em
            apparent_top_margin: 45px       #default 45px px or em
            apparent_right_pos: 1em         #default 1em px or em
            apparent_right_margin: 1em      #default 1em px or em
            current_text_top_margin: 4.5em  #default 39px px or em
            current_text_left_pos: 0em      #default 5em px or em
            current_text_font_size: 1.5em   #default 1.5em em
            current_text_alignment: center  #default center
            current_text_width: 100%        #default 100%
            current_data_top_margin: 10em   #default 7em px or em
            large_icon_top_margin: -3.2em   #default -3.2em px or em Note: pre-0.109.x default was -3.5em
            large_icon_left_position: 0em   #default 0em px or em
            separator_top_margin: 6em       #default 6em px or em
            summary_top_padding: 2em        #default 1em px or em
            summary_font_size: 0.8em        #default 0.8em px or em
            slot_l1: daytime_high           #daytime_high
            slot_l2: daytime_low            #daytime_low
            slot_l3: wind                   #wind
            slot_l4: pressure               #pressure
            slot_l5: sun_next               #sun_next
            slot_r1: pop                    #pop
            slot_r2: humidity               #humidity
            slot_r3: uv_summary             #uv_summary
            slot_r4: fire_summary           #fire_summary
            slot_r5: sun_following          #sun_following

The ones pertaining to the current text are:

            current_text_top_margin: 4.5em  #default 39px px or em
            current_text_left_pos: 0em      #default 5em px or em
            current_text_font_size: 1.5em   #default 1.5em em
            current_text_alignment: center  #default center
            current_text_width: 100%        #default 100%
            current_data_top_margin: 10em   #default 7em px or em

What version of the card are you using?

[DavidFW1960]

See that the current text ones above are not the defaults... I have the default settings as a comment.
Are you on HA 0.109.x? This may be why it's screwed up as the top of card settings need to change for 0.109 (Hence the updates today)

[TonedAUS]

I'm having a similar issue. The temperature is too far to to the top of the card. I've just updated the the last one that you pushed out

Also the Forecast card icons seem to be low res, this was happening before 109

As far as I know I have everything correct but I could have missed something.

[davidmonro]

I was running 1.108.2 with 0.63 of the card.
I'm now running 1.109.1 with card 0.65, and all the style settings in your message above.
Currently it looks like this:

Also, if I scroll to the right, there's a white strip which shouldn't be there:

And if I turn on the developer console and highlight things, it is clearly the current-text span which is projecting into the white space:

It looks like the 100% is with respect to the whole card, but it needs to fit between other things?

Oh, and if I disable the 100% width in the inspector, I get this:

Which mostly fixes the currentText bit, but now the temperature is overlapping with the "Feels like" bit :(

Cheers

David

[davidmonro]

I think I can see why sometimes the temperature text gets mashed up, the span only has a height of 20 pixels even though the text is bigger:

[DavidFW1960]

I'm having a similar issue. The temperature is too far to to the top of the card. I've just updated the the last one that you pushed out

Also the Forecast card icons seem to be low res, this was happening before 109

As far as I know I have everything correct but I could have missed something.

Ok.. so.. the first one is you need to refresh a couple of times. What you are seeing is what happened with 0.109.0 - so do a couple of refreshes and it should come good. Can also go to browser console and right-click on refresh and do a clear cache and hard reload and then maybe a couple more refreshes s well... It should be right then.

[DavidFW1960]

Oh damn.... the forecast icons are correct... those ones are directly from BOM and are low res

[DavidFW1960]

David... Have you tried putting the card in a stack?

[davidmonro]

It is in a stack, in the screenshots above with the black background the card is the 2nd card in a vertical stack, which is inside a horizontal stack, which is then inside another vertical stack (off the bottom of the screenshot there's another card which spans the whole thing). The shot with the grey background is what I see with no stacking.

Oh I get the same results in both firefox and chromium.

Cheers

David

[DavidFW1960]

The current_text_top_margin needs to be increased to move it down below the icon and then the width will 'fit'
I don't understand why you're seeing it like this..
Can you try adding a new dashboard and just adding this card (as a manual card) in the GUI and pasting the lovelace.yaml example in there (Using your sensors of course)

I am running about 3 dashboards one with multiple weather cards and I haven't seen this issue before (nor has anyone reported this) I just wonder what else is on the dashboard to cause this..

[TonedAUS]

Refreshes don't seem to do any good for me. Have refreshed about 20 times as well as cleared cache. It's not a huge issue for me to be honest.

Shame about the forecast icons but I guess we have to work with what we've got :)

[davidmonro]

Same with a fresh dashboard:

Raw config:
views:

• title: Home
  path: home
  badges: []
  cards:
  • entity_apparent_temp: sensor.bom_canberra_feels_like_c
    entity_current_conditions: sensor.bom_canberra_icon_0
    entity_current_text: sensor.bom_current_text
    entity_daily_summary: sensor.bom_canberra_detailed_summary_0
    entity_daytime_high: sensor.bom_today_max
    entity_daytime_low: sensor.bom_today_min
    entity_fire_danger: sensor.bom_fire_danger
    entity_fire_danger_summary: sensor.bom_fire_danger_summary
    entity_forecast_high_temp_1: sensor.bom_canberra_max_temp_c_1
    entity_forecast_high_temp_2: sensor.bom_canberra_max_temp_c_2
    entity_forecast_high_temp_3: sensor.bom_canberra_max_temp_c_3
    entity_forecast_high_temp_4: sensor.bom_canberra_max_temp_c_4
    entity_forecast_high_temp_5: sensor.bom_canberra_max_temp_c_5
    entity_forecast_icon_1: sensor.bom_canberra_icon_1
    entity_forecast_icon_2: sensor.bom_canberra_icon_2
    entity_forecast_icon_3: sensor.bom_canberra_icon_3
    entity_forecast_icon_4: sensor.bom_canberra_icon_4
    entity_forecast_icon_5: sensor.bom_canberra_icon_5
    entity_forecast_low_temp_1: sensor.bom_canberra_min_temp_c_1
    entity_forecast_low_temp_2: sensor.bom_canberra_min_temp_c_2
    entity_forecast_low_temp_3: sensor.bom_canberra_min_temp_c_3
    entity_forecast_low_temp_4: sensor.bom_canberra_min_temp_c_4
    entity_forecast_low_temp_5: sensor.bom_canberra_min_temp_c_5
    entity_humidity: sensor.bom_canberra_relative_humidity
    entity_pop: sensor.bom_canberra_chance_of_rain_0
    entity_pop_1: sensor.bom_canberra_chance_of_rain_1
    entity_pop_2: sensor.bom_canberra_chance_of_rain_2
    entity_pop_3: sensor.bom_canberra_chance_of_rain_3
    entity_pop_4: sensor.bom_canberra_chance_of_rain_4
    entity_pop_5: sensor.bom_canberra_chance_of_rain_5
    entity_pop_intensity: sensor.bom_canberra_rain_today
    entity_pos_1: sensor.bom_canberra_possible_rainfall_1
    entity_pos_2: sensor.bom_canberra_possible_rainfall_2
    entity_pos_3: sensor.bom_canberra_possible_rainfall_3
    entity_pos_4: sensor.bom_canberra_possible_rainfall_4
    entity_pos_5: sensor.bom_canberra_possible_rainfall_5
    entity_possible_today: sensor.bom_canberra_possible_rainfall_0
    entity_pressure: sensor.bom_canberra_pressure_msl
    entity_summary_1: sensor.bom_canberra_summary_1
    entity_summary_2: sensor.bom_canberra_summary_2
    entity_summary_3: sensor.bom_canberra_summary_3
    entity_summary_4: sensor.bom_canberra_summary_4
    entity_summary_5: sensor.bom_canberra_summary_5
    entity_sun: sun.sun
    entity_temperature: sensor.bom_canberra_air_temp_c
    entity_uv_alert: sensor.bom_uv_alert
    entity_uv_alert_summary: sensor.bom_uv_alert_summary
    entity_visibility: sensor.bom_canberra_visability_km
    entity_wind_bearing: sensor.bom_canberra_wind_direction
    entity_wind_speed: sensor.bom_canberra_wind_speed_kmh
    title: BOM Weather
    type: 'custom:bom-weather-card'
    locale: en
    sunset: true
    static_icons: false
    old_icon: hybrid
    tooltip_bg_color: 'rgb( 75,155,239)'
    tooltip_border_color: 'rgb(255,161,0)'
    tooltip_border_width: 1
    tooltip_caret_size: 5
    tooltip_fg_color: '#fff'
    tooltip_left_offset: -12
    tooltip_width: 110
    tooltips: true
    old_daily_format: false
    time_format: 12
    show_beaufort: false
    refresh_interval: 60
    show_separator: false
    temp_top_margin: 0px
    temp_font_weight: 300
    temp_font_size: 4em
    temp_right_pos: 0.85em
    temp_uom_top_margin: '-12px'
    temp_uom_right_margin: 7px
    apparent_top_margin: 45px
    apparent_right_pos: 1em
    apparent_right_margin: 1em
    current_text_top_margin: 4.5em
    current_text_left_pos: 0em
    current_text_font_size: 1.5em
    current_text_alignment: center
    current_text_width: 100%
    current_data_top_margin: 10em
    large_icon_top_margin: '-3.2em'
    large_icon_left_position: 0em
    separator_top_margin: 6em
    summary_top_padding: 2em
    summary_font_size: 0.8em
    slot_l1: daytime_high
    slot_l2: daytime_low
    slot_l3: wind
    slot_l4: pressure
    slot_l5: sun_next
    slot_r1: pop
    slot_r2: humidity
    slot_r3: uv_summary
    slot_r4: fire_summary
    slot_r5: sun_following

[DavidFW1960]

Seriously @davidmonro I use that but only in a basic way... That is weird! Interested in what setting you think is causing it and I can talk with maykar....

@TonedAUS sounds like you don't have the latest version. If you open browser console it should show you the version for the card as 0.65 (thanks @davidmonro for that suggestion). If you don't see that version number there then you have an old version. HACS can be squirrelly with this although I think that is fixed. In any case it appears you have an old version if it's doing that.

[TonedAUS]

Interestingly it says I have version 0.66

[DavidFW1960]

Oops... you're right... I misspoke. 0.66
Can you post your config? I won't be at my computer till Sunday as we're out tomorrow but I will see if I can see what's happening..

[davidmonro]

This gets weirder.

I uninstalled every lovelace plugin, deleted all my lovelace config (actually shut down the instance and rm'd the files) and started afresh. Then reinstalled the weather card plugin.

I then created a new firefox profile. And it still happens:

I'm very confused.

[DavidFW1960]

Post your card config......
The card defaults might be different to the example lovelace.yaml in the repo.. (in fact I know they are different)

Look at the current text settings. These are mine. (The card defaults are comments)

current_text_top_margin: 4.5em  #default 39px px or em
current_text_left_pos: 0em      #default 5em px or em
current_text_font_size: 1.5em   #default 1.5em em
current_text_alignment: center  #default center
current_text_width: 100%        #default 100%

The Icon and Temperature and UOM look correct for the new card. It's just the current text throwing it off.

[TonedAUS]

This is my config

apparent_right_margin: 1em
apparent_right_pos: 1em
apparent_top_margin: 45px
current_data_top_margin: 10em
current_text_alignment: center
current_text_font_size: 1.5em
current_text_left_pos: 0em
current_text_top_margin: 4.5em
current_text_width: 100%
entity_apparent_temp: sensor.bom_sydney_feels_like_c
entity_current_conditions: sensor.bom_sydney_icon_0
entity_current_text: sensor.bom_current_text
entity_daily_summary: sensor.bom_sydney_detailed_summary_0
entity_daytime_high: sensor.bom_today_max_average
entity_daytime_low: sensor.bom_today_min_average
entity_fire_danger: sensor.bom_fire_danger
entity_fire_danger_summary: sensor.bom_fire_danger_summary
entity_forecast_high_temp_1: sensor.bom_sydney_max_temp_c_1
entity_forecast_high_temp_2: sensor.bom_sydney_max_temp_c_2
entity_forecast_high_temp_3: sensor.bom_sydney_max_temp_c_3
entity_forecast_high_temp_4: sensor.bom_sydney_max_temp_c_4
entity_forecast_high_temp_5: sensor.bom_sydney_max_temp_c_5
entity_forecast_icon_1: sensor.bom_sydney_icon_1
entity_forecast_icon_2: sensor.bom_sydney_icon_2
entity_forecast_icon_3: sensor.bom_sydney_icon_3
entity_forecast_icon_4: sensor.bom_sydney_icon_4
entity_forecast_icon_5: sensor.bom_sydney_icon_5
entity_forecast_low_temp_1: sensor.bom_sydney_min_temp_c_1
entity_forecast_low_temp_2: sensor.bom_sydney_min_temp_c_2
entity_forecast_low_temp_3: sensor.bom_sydney_min_temp_c_3
entity_forecast_low_temp_4: sensor.bom_sydney_min_temp_c_4
entity_forecast_low_temp_5: sensor.bom_sydney_min_temp_c_5
entity_humidity: sensor.bom_sydney_relative_humidity
entity_pop: sensor.bom_sydney_chance_of_rain_0
entity_pop_1: sensor.bom_sydney_chance_of_rain_1
entity_pop_2: sensor.bom_sydney_chance_of_rain_2
entity_pop_3: sensor.bom_sydney_chance_of_rain_3
entity_pop_4: sensor.bom_sydney_chance_of_rain_4
entity_pop_5: sensor.bom_sydney_chance_of_rain_5
entity_pop_intensity: sensor.bom_sydney_rain_today
entity_pos_1: sensor.bom_sydney_possible_rainfall_1
entity_pos_2: sensor.bom_sydney_possible_rainfall_2
entity_pos_3: sensor.bom_sydney_possible_rainfall_3
entity_pos_4: sensor.bom_sydney_possible_rainfall_4
entity_pos_5: sensor.bom_sydney_possible_rainfall_5
entity_possible_today: sensor.bom_sydney_possible_rainfall_0
entity_summary_1: sensor.bom_sydney_summary_1
entity_summary_2: sensor.bom_sydney_summary_2
entity_summary_3: sensor.bom_sydney_summary_3
entity_summary_4: sensor.bom_sydney_summary_4
entity_summary_5: sensor.bom_sydney_summary_5
entity_sun: sun.sun
entity_temperature: sensor.bom_sydney_air_temp_c
entity_uv_alert: sensor.bom_uv_alert
entity_uv_alert_summary: sensor.bom_uv_alert_summary
entity_wind_bearing: sensor.bom_sydney_wind_direction
entity_wind_speed: sensor.bom_sydney_wind_speed_kmh
large_icon_left_position: 0em
large_icon_top_margin: '-3.5em'
locale: en
old_daily_format: false
old_icon: hybrid
refresh_interval: 60
separator_top_margin: 6em
show_beaufort: false
show_separator: false
slot_l1: daytime_high
slot_l2: daytime_low
slot_l3: wind
slot_l4: pressure
slot_l5: sun_next
slot_r1: pop
slot_r2: humidity
slot_r3: uv_summary
slot_r4: fire_summary
slot_r5: sun_following
static_icons: false
summary_font_size: 0.8em
summary_top_padding: 2em
sunset: true
temp_font_size: 4em
temp_font_weight: 300
temp_right_pos: 0.85em
temp_top_margin: '-0.3em'
temp_uom_right_margin: 7px
temp_uom_top_margin: '-9px'
time_format: 12
title: BOM Weather
tooltip_bg_color: 'rgb( 75,155,239)'
tooltip_border_color: 'rgb(255,161,0)'
tooltip_border_width: 1
tooltip_caret_size: 5
tooltip_fg_color: '#fff'
tooltip_left_offset: -12
tooltip_width: 110
tooltips: true
type: 'custom:bom-weather-card'

[DavidFW1960]

Yeah... the icon positions are using the old defaults. You need to check your css alterations - see the 7 lines at the top of the onfo.md file (that you see in HACS when you open the card showing the changes)
Specifically:

temp_top_margin: 0px
temp_uom_top_margin: -12px
large_icon_top_margin: -3.2em
current_text_top_margin: 4.5em
current_text_left_pos: 0px
current_data_top_margin: 10em
summary_top_padding: 2em

Change your lovelace to those settings and it will work.
I also just pushed 0.67 with these as defaults. If you manually define them in your lovelace file that will overide the defaults.

Note that these changes are only because of frontend changes in HA 0.109.x

Let me know if it still doesn't work (after you refresh a couple of times)