I am not doing the line wrapping, the editor does.
I wrote the complete expression in one line.
I am not doing the line wrapping, the editor does.
Oh sry, I misunderstood that… I´ll give it a try - strange that this happen.
- component: oh-list-item config: title: Open windows badge: '=(items.testItem.state === "ON" ? 1 : 0) + (items.testItem2.state === "ON" ? 1 : 0) + (items.testItem3.state === "ON" ? 1 : 0)'
Works fine for me, no automatic line-wrapping happens here.
I will give it another try…
Not working here, furthermore, badge seems to not accept numbers, just strings …
That’s how the yaml deserializer works by default, and it seems the editor syntax highlighting doesn’t like it, but it shouldn’t have any influence on the expression itself. I think that’s more because the result should be a string instead of a number, so try:
"=((items... ? 1 : 0) + (items... ? 1 : 0)).toString()
Thanks @ysc, that was the missing link. Now it is working, even with line wrapping :
- component: oh-label-item config: title: offene Türen item: gDoors icon: oh:door badgeColor: '=(items.gDoors.state === "CLOSED") ? "green" : "red"' badge: '=((items.ContactFrontDoor.state === "CLOSED" ? 0 : 1) + (items.ContactTerraceDoor.state === "CLOSED" ? 0 : 1)).toString()' iconUseState: true
Cool, note that you can be even more creative, since you can customize the rendering of most parts of a list item or even the cell header/background:
component: oh-cell config: title: Doors & Windows slots: header: - component: f7-list config: mediaList: true slots: default: - component: f7-list-item config: title: Doors & Windows slots: title: - component: f7-chip config: text: "=((items.FGDW002WindowSensor_Open.state === 'OPEN' ? 1 : 0) + (items.HS1DSZDoorSensor_DoorSensor.state === 'OPEN' ? 1 : 0)).toString()" - component: Label config: text: Front Door open! style: color: red visible: =items.HS1DSZDoorSensor_DoorSensor.state === 'OPEN' - component: Label config: text: Living Room Window open! style: color: red visible: =items.FGDW002WindowSensor_Open.state === 'OPEN'
component: oh-cell config: title: Doors & Windows slots: background: - component: f7-block config: class: - card-opened-fade-out style: position: absolute right: 10px bottom: 10px slots: default: - component: f7-chip config: class: - margin-left iconF7: exclamationmark_triangle iconColor: red text: Front Door visible: =items.HS1DSZDoorSensor_DoorSensor.state === 'OPEN' - component: f7-chip config: class: - margin-left iconF7: exclamationmark_triangle iconColor: red text: Living Room Window visible: =items.FGDW002WindowSensor_Open.state === 'OPEN'
Be aware though that
visible attributes are not taken into account when editing (this is by design), so you might think it doesn’t work, switch to Run mode to see the final result with the visibility conditions applied.
Thanks Yannick, cool stuff. I will give it a try later on
could you point me in the right direction, how to make a oh-cell content (meaning the
header: slot) spanning the whole widht of the cell?
The intention is to align some element (e.g. a badge) next to the right border or to have the oh-trend element span the full width.
Currently the content’s width is derived from the widest flex element:
Notice the trendline ending at the right end of the title label…
That’s the beginning my current widget code:
component: oh-cell config: expandable: false color: '=(items[props.mainItem+"_Fail"].state > 0) ? "red" : items[props.mainItem+"_Warn"].state > 0 : "orange" : ""' on: true action: popup actionModal: widget:Popup_Timestamp actionModalConfig: title: =props.title icon: =props.icon mainItem: =props.mainItem secItem: =props.secItem delimiter: =props.delimiter footerOk: =props.footerOk footerBad: =props.footerBad slots: default: - component: oh-label-card slots: default: - component: oh-list header: - component: oh-trend config: trendItem: =props.mainItem+"_Warn" trendGradient: - red - orange - green - component: f7-col slots: default:
for the OH-trend try: style: position: absolute width: 100% height: 100% top: 0 left: 0 z-index: 1
width: 100% does not derive the width of the whole cell, it just gives the width of the flex content in the
That’s why I’m asking
I can increase the width, e.g. to 280px by spreading some content:
header: - component: oh-trend config: trendItem: =props.mainItem+"_Warn" - component: f7-col slots: default: - component: f7-row config: class: - align-items-center - justify-content-flex-start style: font-weight: 400 width: 280px
But - of course - I can’t used fixed values here
So I’m almost done, just missing the value of the variable width of the cell…
Where to derive/how to calculate the width of the parent cell from?
ok, got it. Did you try the z-index?
Another workaround is to move away from the oh cell and oh label card to an f7 card. You are fully flexible to put the content of the widget where you want it to be, have more flexibility on the background like color etc… and e.g. the trend line goes like the screenshot i sent.
can you add the trend line not into the header but as additional component:
- component: oh-trend config: trendItem: =[props.itemCo2] trendGradient: - green - orange - red style: --f7-theme-color-bg-color: transparent background: transparent filter: opacity(30%) position: absolute width: 100% height: 100% top: 0 left: 2 z-index: 1
I know, but I’m almost happy with the customization/style options.
AND: I’m quite sure, that there is a way to get the actual width of the parent cell.
I’m just lacking some CSS/f7/… experience here …
Not sure I understand …
I thought, that the content of a
oh-cell which should be shown when not-expanded has to go into the
The content of the expanded cell goes then into slot
Means: If I move the trend component from
default: it will appear only if the cell got expandend - right?
And: I’m not just after the trendline. As I wrote, this is just an example . I’m more after getting the actual width of the cell
you are right, i just did a test. The oh-cell does not allow this as far as i can see
you then might want to look to switch to f7 as you anyway already create your own widget. have fun!
Thanks a lot for your input!
Still hoping, that I’m just lacking some information.
I’m convinced, that there must be way to inherit the width …
Not giving up that quickly
@ysc , I’ve had a look into …
.cell-placeholder margin-top calc(var(--f7-menu-item-height) + var(--f7-card-expandable-margin-vertical)) !important height 120px margin-left 3px margin-right 3px width calc(100% - 6px) .button height 120px padding 35px
If I understand correctly, the width of the placeholder is what I’m after
Any hint, how I can access the resulting/computed width of the placeholder in my
header:-slot of the
… or some other idea how to stretch the header-elements to the width of the “parent” cell?
background slot will have the width of the cell (so you can set
width: 100% to elements in that slot) while the
header slot will have the width of the expanded cell (even when it’s not expanded).
background slot is only used for non-interactive elements to put behind the elements in
header but you probably still can add interactive stuff anyway.
Excellent! That was the missing link:
Many thanks Yannick!