Hello Community, I have some issues with CSS / Responsive development.
following custom widget in desktop view looking as expected:
3 color bars with:
- 3 colors in the first line for 3 price ranges (up to 24cent green, up to 30 orange and red for prices over)
- 2 split bars for 0 to 100% solar power (orange for external energy, green for solar power)
- 2 split bars for 0 to 100% autarky level
Its a mixure of aWATTar Binding for stock exchange energy prices calculated with the costs of my self produces Photovoltaic Solar Power price and the relation between external power and self produced. I used a 1x1px transparent space gif with different colored backgrunds.
with the following code:
uid: Strompreis_Uebersicht
timestamp: Mar 5, 2021, 6:18:42 PM
component: oh-list-card
config: {}
slots:
default:
- component: oh-image
config:
url: http://192.168.178.11:8081/img/s.gif
style:
position: absolute
background: "=(items.PowerDogAPI_PDEffektiverStrompreis.state > 24) ? ((items.PowerDogAPI_PDEffektiverStrompreis.state > 30) ? 'linear-gradient(to right, hsla(0, 100%, 100%, 0), #cc0000)' : 'linear-gradient(to right, hsla(0, 100%, 100%, 0), #e67300)') : 'linear-gradient(to right, hsla(0, 100%, 100%, 0), #99FF33)'"
top: 6px
right: =10 + 'px'
width: =200 + 'px'
height: 20px
z-index: 20
- component: oh-label-item
config:
item: PowerDogAPI_PDEffektiverStrompreis
title: Effektiver Strompreis
style:
font-weight: 800
z-index: 99
action: analyzer
actionAnalyzerItems:
- aWATTarHourlyPrice_Current_Totalgross
- PowerDogAPI_PDEffektiverStrompreis
- component: oh-label-item
config:
item: PowerDogAPI_PDAnteilPV
title: Anteil Sonnenstrom
style:
font-weight: 800
z-index: 99
- component: oh-image
config:
url: http://192.168.178.11:8081/img/s.gif
style:
position: absolute
background: "linear-gradient(to right, hsla(0, 100%, 100%, 0), #e67300)"
top: 38px
right: =10 + 200 * (items.PowerDogAPI_PDAnteilPV.state / 100) + 'px'
width: =200 * ((100 - items.PowerDogAPI_PDAnteilPV.state) / 100) + 'px'
height: 20px
z-index: 2
- component: oh-image
config:
url: http://192.168.178.11:8081/img/s.gif
style:
position: absolute
background: "linear-gradient(to left, hsla(0, 100%, 100%, 0), #009900)"
top: 38px
right: =10 + 'px'
width: =200 * (items.PowerDogAPI_PDAnteilPV.state / 100) + 'px'
height: 20px
z-index: 1
- component: oh-label-item
config:
title: ='Autarkie heute'
item: Autarkie_Wert
iconUseState: false
style:
font-weight: 800
z-index: 99
- component: oh-image
config:
url: http://192.168.178.11:8081/img/s.gif
style:
position: absolute
background: "linear-gradient(to left, hsla(0, 100%, 100%, 0), #e67300)"
top: 70px
right: =10 + 200 * (items.Autarkie_Wert.state / 100) + 'px'
width: =200 * ((100 - items.Autarkie_Wert.state) / 100) + 'px'
height: 20px
z-index: 1
- component: oh-image
config:
url: http://192.168.178.11:8081/img/s.gif
style:
position: absolute
background: "linear-gradient(to right, hsla(0, 100%, 100%, 0), #009900)"
top: 70px
right: =10 + 'px'
width: =200 * (items.Autarkie_Wert.state / 100) + 'px'
height: 20px
z-index: 2
- component: oh-label-item
config:
item: aWATTarHourlyPrice_Current_Totalgross
title: Preis Strombörse
style:
font-weight: 800
z-index: 99
but in mobile view it shows up like this and I have no idea how to fix it… any recomendations?
If this is fixed I will set up Probs and finetune the view.
