Hi all,
I just updated from 4.3.1 to 4.3.3 and now (almost)? all UI elements are significantly larger. Well, I tried to get many charts, lists and cards in a space-efficient way on my pages before this update, and now they are even larger than before. Is this a bug, a config error on my side or just intended behaviour?
New UI:
Thanks for clarification 
Bernd
Maybe if you explain or show a screen shot of the old and provide more information about what we are looking at (e.g. the YAML for the Page) it will be easier to help. As it is, the current screen shot looks reasonable and it’s not clear where the problem is (e.g. are the widgets wider, taller, both?)
Well, of course I don’t have a screenshot from before the update at hand
But I’m pretty sure the size of e.g. a label with chart used to be like the inner rectangle you can see here (first row, second column):
This rectangle is shown when the mouse pointer is above the element, so it’s like highlighting the inner part of the element, and that didn’t happen before the update at all.
It could also be possible that all elements have the same width, but increased height.
The underlying construction of the OH card widgets did change recently (although I can’t recall if that was between 4.3.1 and 4.3.3). That change was not intended to have an impact like you are describing, but if you have put in additional styles or stylesheets on this page, then those could certainly be a potential issue.
If you show the full yaml configuration for that page we might be able to pin-point where the issue is.
Yes I can confirm
The OH label widgets are bigger and it was with update from 4.3.2 to OH 4.3.3.
In release notes I have seen changes on UI, but I remember only for image card.
Here before and after:
In OH 5 Milestone 1 I did not see this and I don’t think I have additional styles or stylesheets.
So this is a bug, or a “feature” just not landed in OH 5 yet?
As you can see, on a phone screen there is even not enough space to show temperatures in a 4 column layout anymore:
Same page in Firefox on a computer monitor:
Looks “ok”, but it needs the whole page.
As requested, here the YAML for this page:
config:
label: Heizung
order: "5"
sidebar: true
style:
background: oldlace
blocks:
- component: oh-block
config:
title: Wärmepumpe
slots:
default:
- component: oh-grid-row
config: {}
slots:
default:
- component: oh-grid-col
config: {}
slots:
default:
- component: oh-list-card
config: {}
slots:
default:
- component: oh-label-item
config:
item: Warmepumpe_General_Ambient_Operating_State_Value
subtitle: GenAmb. Op. State
title: Betriebsmodus
- component: oh-label-item
config:
item: Warmepumpe_Operating_State_Value
subtitle: Hp Op. State
title: Wärmepumpenstatus
- component: oh-label-item
config:
item: Warmepumpe_Heatpump_Hp_State_Value2
subtitle: Hp State
title: Anforderungsart
- component: oh-block
config:
title: "Aussen: Temperatur"
slots:
default:
- component: oh-grid-row
config: {}
slots:
default:
- component: oh-grid-col
config: {}
slots:
default:
- component: oh-label-card
config:
action: analyzer
actionAnalyzerItems:
- WP_ActualAmbientTemperature_Value
background: navajowhite
icon: material:forest
item: WP_ActualAmbientTemperature_Value
trendItem: WP_ActualAmbientTemperature_Value
trendSampling: 1
- component: oh-block
config:
title: "Innen: Temperatur"
slots:
default:
- component: oh-grid-row
config: {}
slots:
default:
- component: oh-grid-col
config: {}
slots:
default:
- component: oh-label-card
config:
action: analyzer
actionAnalyzerItems:
- Shelly_HT_3__Temperature
- Shelly_HT_1__Temperature
- Shelly_HT_2__Temperature
- WetterstationInnen_Indoor_Temperature
- WP_ActualAmbientTemperature_Value
background: orange
fontSize: 18px
icon: kind.png
iconSize: 20
item: Shelly_HT_3__Temperature
trendItem: Shelly_HT_3__Temperature
trendSampling: 1
- component: oh-grid-col
config: {}
slots:
default:
- component: oh-label-card
config:
action: analyzer
actionAnalyzerItems:
- Shelly_HT_3__Temperature
- Shelly_HT_1__Temperature
- Shelly_HT_2__Temperature
- WetterstationInnen_Indoor_Temperature
- WP_ActualAmbientTemperature_Value
background: orange
fontSize: 18px
icon: piano.png
iconSize: 20
item: Shelly_HT_1__Temperature
trendItem: Shelly_HT_1__Temperature
trendSampling: 2
- component: oh-grid-col
config: {}
slots:
default:
- component: oh-label-card
config:
action: analyzer
actionAnalyzerItems:
- Shelly_HT_3__Temperature
- Shelly_HT_1__Temperature
- Shelly_HT_2__Temperature
- WetterstationInnen_Indoor_Temperature
- WP_ActualAmbientTemperature_Value
actionAnalyzerItmes:
- Shelly_HT_2__Temperature
background: orange
fontSize: 18px
icon: bed.png
iconSize: 20
item: Shelly_HT_2__Temperature
trendItem: Shelly_HT_2__Temperature
trendSampling: 4
- component: oh-grid-col
config: {}
slots:
default:
- component: oh-label-card
config:
action: analyzer
actionAnalyzerItems:
- Shelly_HT_3__Temperature
- Shelly_HT_1__Temperature
- Shelly_HT_2__Temperature
- WetterstationInnen_Indoor_Temperature
- WP_ActualAmbientTemperature_Value
background: orange
fontSize: 18px
icon: sofa.png
iconSize: 20
item: WetterstationInnen_Indoor_Temperature
trendItem: WetterstationInnen_Indoor_Temperature
trendSampling: 1
- component: oh-block
config:
title: Heizung
slots:
default:
- component: oh-grid-row
config: {}
slots:
default:
- component: oh-grid-col
config: {}
slots:
default:
- component: oh-label-card
config:
action: analyzer
actionAnalyzerItems:
- Warmepumpe_Calculated_Ambient_Temperature_Value
background: navajowhite
fontSize: 18px
icon: wp_at.png
iconSize: 22
item: Warmepumpe_Calculated_Ambient_Temperature_Value
trendItem: Warmepumpe_Calculated_Ambient_Temperature_Value
trendSampling: 1
- component: oh-grid-col
config: {}
slots:
default:
- component: oh-label-card
config:
action: analyzer
actionAnalyzerCoordSystem: time
actionAnalyzerItems:
- WP_Tflow_Value
- WP_Treturn_Value
- WP_ActualAmbientTemperature_Value
background: navajowhite
fontSize: 18px
icon: pfeil_rot_links.png
iconSize: 22
item: WP_Tflow_Value
trendItem: WP_Tflow_Value
trendSampling: 1
- component: oh-grid-col
config: {}
slots:
default:
- component: oh-label-card
config:
action: analyzer
actionAnalyzerCoordSystem: time
actionAnalyzerItems:
- WP_Tflow_Value
- WP_Treturn_Value
- WP_ActualAmbientTemperature_Value
background: navajowhite
fontSize: 18px
icon: pfeil_blau_rechts.png
iconSize: 22
item: WP_Treturn_Value
trendItem: WP_Treturn_Value
trendSampling: 1
- component: oh-grid-row
config: {}
slots:
default:
- component: oh-grid-col
config: {}
slots:
default:
- component: oh-label-card
config:
action: analyzer
actionAnalyzerCoordSystem: time
actionAnalyzerItems:
- WP_Treturn_Value
- WP_Tflow_Value
- Warmepumpe_Heatpump_Vol_sink_Value
background: papayawhip
fontSize: 18px
icon: wp_hlp.png
iconSize: 22
item: Warmepumpe_Heatpump_Vol_sink_Value
trendItem: Warmepumpe_Heatpump_Vol_sink_Value
trendSampling: 1
- component: oh-grid-col
config: {}
slots:
default:
- component: oh-label-card
config:
action: analyzer
actionAnalyzerCoordSystem: time
actionAnalyzerItems:
- WP_Actual_High_Temperature_Value
background: lavender
fontSize: 18px
icon: wp_boiler.png
iconSize: 22
item: WP_Actual_High_Temperature_Value
trendItem: WP_Actual_High_Temperature_Value
trendSampling: 1
- component: oh-grid-col
config: {}
slots:
default:
- component: oh-label-card
config:
action: analyzer
actionAnalyzerCoordSystem: time
actionAnalyzerItems:
- Warmepumpe_Boiler_SetMaximumBoilerTemperature_Value
- WP_Actual_High_Temperature_Value
- Stromzaehler_Haus_Leistung_Total
background: lavender
fontSize: 18px
icon: wp_boiler.png
iconSize: 22
item: Warmepumpe_Boiler_SetMaximumBoilerTemperature_Value
trendItem: Warmepumpe_Boiler_SetMaximumBoilerTemperature_Value
trendSampling: 1
- component: oh-grid-row
config: {}
slots:
default:
- component: oh-grid-col
config: {}
slots:
default:
- component: oh-label-card
config:
action: analyzer
actionAnalyzerCoordSystem: time
actionAnalyzerItems:
- WP_ActualPowerConsumption_Value
- Warmepumpe_Heatpump_Qp_Value
background: mistyrose
fontSize: 18px
icon: "material: electrical_services"
iconSize: 22
item: WP_ActualPowerConsumption_Value
trendItem: WP_ActualPowerConsumption_Value
trendSampling: 1
- component: oh-grid-col
config: {}
slots:
default:
- component: oh-label-card
config:
action: analyzer
actionAnalyzerCoordSystem: time
actionAnalyzerItems:
- Warmepumpe_Heatpump_Qp_Value
- WP_ActualPowerConsumption_Value
background: mistyrose
fontSize: 18px
icon: fbh.png
iconSize: 22
item: Warmepumpe_Heatpump_Qp_Value
trendItem: Warmepumpe_Heatpump_Qp_Value
trendSampling: 1
- component: oh-grid-row
config: {}
slots:
default:
- component: oh-grid-col
config: {}
slots:
default:
- component: oh-label-card
config:
action: analyzer
actionAnalyzerCoordSystem: time
actionAnalyzerItems:
- WP_ActualPowerConsumption_Value
- Warmepumpe_General_EManager_Actual_Power_Excess_Value
background: mistyrose
fontSize: 18px
icon: "material: solar_power"
iconSize: 22
item: Warmepumpe_General_EManager_Actual_Power_Excess_Value
title: PV Überschuss (neg.)
trendItem: Warmepumpe_General_EManager_Actual_Power_Excess_Value
trendSampling: 1
- component: oh-grid-col
config: {}
slots:
default:
- component: oh-label-card
config:
action: analyzer
actionAnalyzerItems:
- WP_COP_Value
- WP_ActualAmbientTemperature_Value
background: lightgreen
fontSize: 18px
iconSize: 22
item: WP_COP_Value
title: COP
trendItem: WP_COP_Value
trendSampling: 1
- component: oh-grid-col
config: {}
slots:
default:
- component: oh-label-card
config:
action: analyzer
actionAnalyzerItems:
- Warmepumpe_Kompressorrating_Value
background: papayawhip
fontSize: 18px
iconSize: 22
item: Warmepumpe_Kompressorrating_Value
title: Kompressor
trendItem: Warmepumpe_Kompressorrating_Value
trendSampling: 1
- component: oh-grid-row
config: {}
slots:
default:
- component: oh-grid-col
config: {}
slots:
default:
- component: oh-label-card
config:
action: analyzer
actionAnalyzerItems:
- WP_Treturn_Value
- calc_RL_Soll
- WP_ActualAmbientTemperature_Value
- Warmepumpe_Calculated_Ambient_Temperature_Value
background: papayawhip
fontSize: 18px
iconSize: 22
item: calc_RL_Soll
title: RL Soll
trendItem: calc_RL_Soll
trendSampling: 1
- component: oh-grid-col
config: {}
slots:
default:
- component: oh-label-card
config:
action: analyzer
actionAnalyzerItems:
- WP_Treturn_Value
- WP_Tflow_Value
- WP_ActualAmbientTemperature_Value
- Warmepumpe_Calculated_Ambient_Temperature_Value
- Warmepumpe_VL_RL_Avg
- Warmepumpe_Kompressorrating_Value
background: papayawhip
fontSize: 18px
item: Warmepumpe_VL_RL_Avg
title: gl. VL/RL
trendItem: Warmepumpe_VL_RL_Avg
trendSampling: 1
masonry: []
grid: []
canvas: []
… yes, I set fontSize and iconSize manually… But I have other pages without these manual overrides, and they show the same problems - everything is much bolder, needs much more space, and especially on a phone screen space is limited.
Ah, just found a screenshot from this page from last November on my phone
And now (as above):
Quite impressive difference.
I think there is enough here to file an issue.
If the behavior is not happening on OH 5 it means there’s been a change to OH 5 which should probably be cherry picked and backported to 4.3.
Be sure to include the before and after screen shots and the YAML in your issue.
This topic was automatically closed 41 days after the last reply. New replies are no longer allowed.
This has been fixed by Fix oh-image-card styling affects all cards by florian-h05 · Pull Request #3065 · openhab/openhab-webui · GitHub, which has been backported to 4.3.x and is part of openHAB 4.3.4, so please upgrade to 4.3.4.
