Oliver2
(Oliver)
December 17, 2021, 7:45pm
1
I need some advice from css experts please.
Which css properties do I have to use to make the moon icon right-aligned in an oh-cell given that the layout page is responsive. Unfortunately
postion: absolute
right: 0
does not work as the f7-block does not have the cell’s width.
This is what looks like:
Here is the current yaml code. I am struggeling now for 2 days and am not able to find a solution. Many thanks!
component: oh-cell
config:
expandable: true
slots:
header:
- component: f7-block
config:
style:
display: flex
flex-direction: row
align-items: center
slots:
default:
- component: Label
config:
text: 2°
- component: oh-icon
config:
icon: weather.png
- component: Label
config:
text: weather condition
- component: oh-icon
config:
icon: moon.svg
ysc
(Yannick Schaus)
December 18, 2021, 12:10pm
2
Put the icon to align on the right in the background
slot instead of the header
slot:
component: oh-cell
config:
expandable: true
slots:
background:
- component: oh-icon
config:
icon: moon
width: 40
style:
position: absolute
right: 10px
top: 10px
header:
- component: f7-block
config:
style:
display: flex
flex-direction: row
align-items: center
slots:
default:
- component: Label
config:
text: 2°
- component: oh-icon
config:
icon: weather.png
- component: Label
config:
text: weather condition
1 Like
Oliver2
(Oliver)
December 18, 2021, 4:34pm
3
good idea. works fine. Thanks you very much Yannick
@others : In case, there is a ccs solution, please let me know. I am alsways willing to learn.
ysc
(Yannick Schaus)
December 18, 2021, 7:21pm
4
You won’t find a solution that doesn’t involve the background
slot because widgets in that slot get added to a container that matches the width of the cell when not expanded:
whereas what gets added to the header
slot gets added to a container that has the width of the card when expanded:
1 Like
Oliver2
(Oliver)
December 19, 2021, 1:16pm
5
EDIT: hmmm. after leaving and re-opening the yaml code editor the widget is now showing up with a different background color. so, that is being solved.
If someone has some useful tips as to where to make the code smarter, they are more than welcome.
When using the background slot I am not able to control the background color anymore by whatever control I try.
Sounds to some extend logically but I thought at least by setting the background of the f7-block I should be able to override it.
I also think that the whole yaml code is too clumsy.
There probably is a smarter way to achieve the desired result.
If you have some tips I would be thankful. Please do not misunderstand - I am not thinking of getting the whole code rewritten. Just some tips where to learn a bit more.
uid: my-wetter-cell
tags: []
props:
parameters: []
parameterGroups: []
timestamp: Dec 19, 2021, 1:18:23 PM
component: oh-cell
config:
background: gray
color: gray
bgColor: gray
expandable: true
on: true
style:
--f7-card-expandable-bg-color: gray
slots:
background:
- component: f7-block
config:
bgColor: gray
background: gray
style:
background-color: gray
background: gray
--f7-card-expandable-bg-color: gray
position: absolute
left: 0px
top: -20px
width: 100%
_padding: 0px 0px 0px 0px
class:
- card-opened-fade-out
slots:
default:
- component: oh-icon
config:
icon: ="oh:mymoon-" + items.Mondphase.state.toString() + ".svg"
style:
position: absolute
right: 15px
top: 12px
width: 30px
- component: f7-row
config:
style:
height: 55px
slots:
default:
- component: f7-col
config:
style:
width: 25px
display: flex
align-items: center
slots:
default:
- component: oh-icon
config:
icon: ="oh:owm-" + items.OWM_IconID.state.toString() + ".png"
style:
width: 55px
- component: Label
config:
style:
fontSize: 34px
padding-right: 8px
padding-left: 25px
text: =items.OWM_Aussentemperatur.displayState
- component: Label
config:
style:
fontSize: 16px
text: ="(" + items.OWM_GefuhlteTemperatur.displayState + ")"
- component: f7-row
config:
style:
height: 25px
slots:
default:
- component: f7-col
slots:
default:
- component: Label
config:
style:
fontSize: 16px
fontWeight: 600
text: =items.OWM_Wetterlage.state
- component: f7-row
config:
style:
height: 20px
slots:
default:
- component: f7-col
config:
style:
width: 80px
slots:
default:
- component: Label
config:
style:
fontSize: 16px
text: ="🌤 " + items.OWM_Bewolkung.displayState
- component: f7-col
config:
style:
width: calc(100% - 82px)
border-left: 1px solid gray
padding-left: 8px
slots:
default:
- component: Label
config:
style:
fontSize: 16px
text: ="🔆 " + dayjs(items.OWM_SunriseTime.state).format("HH:mm") + "-" + dayjs(items.OWM_SunsetTime.state).format("HH:mm")
- component: f7-row
config:
style:
height: 20px
slots:
default:
- component: f7-col
config:
style:
width: 80px
slots:
default:
- component: Label
config:
style:
fontSize: 16px
text: ="🌬 " + items.OWM_Wind.displayState
- component: f7-col
config:
style:
width: calc(100% - 82px)
border-left: 1px solid gray
padding-left: 8px
slots:
default:
- component: Label
config:
style:
fontSize: 16px
text: ="🔅 " + items.SNMPcameingang_Helligkeit.displayState
default:
- component: oh-webframe
config:
display: flex
align-content: center
align-items: center
height: 270px
src: /static/wetter/fc_tage.html