Mark_VG
June 25, 2021, 6:43am
1
Hi All
Is it possible to set the background of the oh-list-item and oh-toggle-item components?
I have the following:
- component: f7-list
config:
style:
position: absolute
left: 30%
top: 55%
width: 70%
background-color: rgb(220,220,220)
class:
- padding-bottom
slots:
default:
- component: Label
config:
text: Zones Bypassed
style:
padding-left: 20px
font-weight: 500
line-height: 20px
background: rgb(220,220,220)
- component: oh-repeater
config:
fragment: true
for: item
sourceType: itemsInGroup
groupItem: =(vars.Prefix) + '_Bypass_Group'
slots:
default:
- component: oh-toggle-item
style:
background: transparent
config:
# visible: =items[loop.item.name].state == "OPEN"
title: =loop.item.label
item: =loop.item.name
color: '=(items[loop.item.name].state == "ON") ? "red" : "gray"'
Which produces:
I have also tried:
background: gray
background-color: rgb(220,220,220)
Don’t seem to be able to find anything that works.
As you can see it does work on the Label component though?
Any assistance would be appreciated.
I don’t think it is possible for the default list item widgets. Their representation is managed automagically for UI consistency.
You are not bound to using the built-in openHAB list widgets. You can create your own custom list widgets and use Framework7 UI components like f7-block, f7-icon, f7-row, f7-col and f7-icon.
Mark_VG
June 25, 2021, 6:00pm
3
Hi Olivier.
Thanks for your response.
I have used some of the Framework7 UI components. However not sure if my knowledge extends to the level of creating the two custom lists I need - especially the TOGGLE.
Will have to look at this in detail if I don’t get any suggestions
ysc
June 25, 2021, 6:11pm
4
I tried and something like this just works?
- component: oh-toggle-item
config:
title: Lights
footer: =items.HueBureau_Color.state
item: HueBureau_Color
style:
backgroundColor: var(--f7-color-red)
Mark_VG
June 25, 2021, 6:44pm
5
ysc:
I tried and something like this just works?
Hi Yannick.
Thanks for the response.
I tested with a “blank” widget - and yes, it just works.
However with mine, no such luck… I can’t see anything wrong. The big difference being its in an oh-repeater. Could that be the issue?
- component: f7-list
config:
visible: =items[props.bypassProxy].state == "ON"
style:
position: absolute
left: 30%
top: 53%
width: 70%
backgroundColor: rgb(220,220,220)
class:
- padding-bottom
slots:
default:
- component: Label
config:
text: Zones Bypassed
style:
padding-left: 20px
font-weight: 500
line-height: 20px
backgroundColor: red
- component: oh-repeater
config:
fragment: true
for: item
sourceType: itemsInGroup
groupItem: =(vars.Prefix) + '_Bypass_Group'
slots:
default:
- component: oh-toggle-item
style:
backgroundColor: red
config:
# visible: =items[loop.item.name].state == "OPEN"
title: =loop.item.label
item: =loop.item.name
color: '=(items[loop.item.name].state == "ON") ? "red" : "gray"'
Works for the Label (outside oh-repeater), but not the oh-toggle-item inside the oh-repeater.
EDIT: My BAD!!! :
config:
# visible: =items[loop.item.name].state == "OPEN"
title: =loop.item.label
item: =loop.item.name
color: '=(items[loop.item.name].state == "ON") ? "red" : "gray"'
style:
backgroundColor: red
Moved the style: bit to the correct place and it now works.
Sorry for the waste of time.
ysc
June 25, 2021, 7:03pm
6
You have to put the style: block inside the config: (indented).
1 Like
Mark_VG
June 25, 2021, 7:05pm
7
It works when you do it right… Thank you.
Now to try and get rid of the border lines etc.
1 Like
Mark_VG
June 26, 2021, 8:16am
8
Hi Yannick
A further question which is “sort of” on topic.
Are you aware of a way to change the actual toggle size?
I can change the font size:
- component: oh-toggle-item
config:
title: =loop.item.label
item: =loop.item.name
color: '=(items[loop.item.name].state == "ON") ? "green" : "gray"'
style:
backgroundColor: rgb(220,220,220)
font-size: 50%
icon-size: 10%
But does not seem to affect the toggle size. Extreme example below
Thank you.
ysc
June 26, 2021, 10:02am
9
You can, with the new CSS stylesheet only, there’s no other direct option to do it. You can define a class that will affect all toggles below it, so don’t do it on the list items but the list itself:
- component: oh-list
config:
stylesheet: |
.big-toggles .toggle {
transform: scale(150%);
margin-right: 1rem;
}
class:
- big-toggles
slots:
default:
# all toggles below will be 150% of their original size
ysc
June 26, 2021, 10:18am
10
My bad there’s an even better way - redefine the f7 CSS variables here to your liking in a common ancestor (no need for a stylesheet in this case, you can just use style): CSS Variables Reference | Framework7 Documentation
1 Like
Mark_VG
June 26, 2021, 10:29am
11
ysc:
My bad there’s an even better way
Thanks that works really well:
- component: oh-toggle-item
config:
title: =loop.item.label
item: =loop.item.name
color: '=(items[loop.item.name].state == "ON") ? "green" : "gray"'
style:
backgroundColor: rgb(220,220,220)
font-size: 50%
#transform: scale(0.95)
--f7-toggle-width: 40px
--f7-toggle-height: 10px
However the row height doesn’t change - so the same amount of space is still required:
Have tried the line-height etc settings but not finding one that works.
EDIT: Found --f7-list-item-min-height: 14px but that seems to be overridden below about 26px
EDIT2:
--f7-list-item-min-height: 14px
--f7-list-item-padding-vertical: 1px
EDIT3: And I found the solution to the borders
--f7-list-border-color: transparent
--f7-list-item-border-color: transparent
These just have to be on the actual component.
