And you may try the after-end slot for the buttons (I don’t know if this has implications on the alignment though)
sorry neither of these seem to make any difference!
I don’t think it likes having buttons in the oh-list-item slots
I took your exact code and added in mine and we get the icon which is good but the buttons disappear!
uid: Volume_control_2
tags: []
props:
parameters:
- description: Volume to control
label: Description
name: buttonname
required: false
type: TEXT
- context: item
description: Item choice
label: Volume Item
name: item1
required: true
type: TEXT
timestamp: Feb 3, 2021, 10:06:57 PM
component: f7-card
config:
title: ="Abfuhrtermine:"
slots:
default:
- component: f7-card-content
slots:
default:
- component: f7-list
config:
mediaList: true
slots:
default:
- component: oh-list-item
config:
title: =props.buttonname
icon: f7:speaker
iconColor: black
slots:
default:
- component: oh-button
config:
text: Down
outline: true
text-color: red
action: command
actionItem: =props.item1
actionCommand: OFF
- component: oh-button
config:
text: Up
outline: true
text-color: red
action: command
actionItem: =props.item1
actionCommand: ON
No I also already figured that it does not like buttons in the default slot. Try to move them to the after-start slot again.
Following this as well - I’ve tried after-start - no luck:
uid: Volume_control_2
tags: []
props:
parameters:
- description: Volume to control
label: Description
name: buttonname
required: false
type: TEXT
- context: item
description: Item choice
label: Volume Item
name: item1
required: true
type: TEXT
timestamp: Feb 3, 2021, 10:06:57 PM
component: f7-card
config:
title: ="Abfuhrtermine:"
slots:
default:
- component: f7-card-content
slots:
default:
- component: f7-list
config:
mediaList: true
slots:
default:
- component: oh-list-item
config:
title: =props.buttonname
icon: f7:speaker
iconColor: black
slots:
after-start:
- component: oh-button
config:
text: Down
outline: true
text-color: red
action: command
actionItem: =props.item1
actionCommand: OFF
- component: oh-button
config:
text: Up
outline: true
text-color: red
action: command
actionItem: =props.item1
actionCommand: ON
Hm… The only thing that is different now compared to my own example with the ‘after-start’ approach is that I used an f7-list-item. Maybe that is the problem. However you would loose the ability to add the f7-icon property if you change this…
I don’t understand the architecture enough but it would seem logical if we could just get to the existing code of a list item then it might be easier to see what is happening. This really should be a standard object for multiple buttons for one item.
Maybe I can have a closer look tonight. Unfortunately I cannot test the code myself right now
Thanks - I’ve been through the forums and there does not seem to be a solution.
Its quite possible to have a single action on a simple list widget but once you start getting into slots and columns it seems the headache starts. Rich has some good examples here but nothing we can use AFAIK.
You could also put both butttons in a block… Maybe you want to try that as well
Hi,
Take a look at this post OH flex alignment - #7 by AndyMB.
I’ve just been fiddling about with this for an hour or two. If you want custom stuff on the left use the default
(which is really inner
) slot, for custom components on the right, use the slot after
. You can still use the properties e.g. title
and icon
in the example, if you don’t need anything fancy
I’m creating a widget that will have 4 ‘radio’ buttons for an item that can have one of these 4 statuses. I’ll post when I’m done.
Well done Andy - great detective work! I was so close using F7-Col but for some reason F7 works for part of the problem and OH works for others…very frustrating. What is also strange is that the widget builder does not render this at all. @DrRSatzteil Thomas was also very close with the slot definition.
If I was being very picky I’d like to get the buttons a bit further over to the right in-line with the other items but I think this is pretty close. Have a virtual beer on me!!
EDIT: its a bit of a hack but you can add to the f7-block style right-margin = -25px
and that lines up fine.
IMHO once this is done it should be part of the standard setup. It was very easy to do this in OH2.5 and the current OH3 setup of variables gives you an ugly list box which is uneccessary for a small number of options.
Here is my code for the above
uid: threebutttons
tags: []
props:
parameters:
- description: A text prop
label: Prop 1
name: prop1
required: false
type: TEXT
- context: item
description: An item to control
label: Item
name: item
required: false
type: TEXT
parameterGroups: []
timestamp: Feb 4, 2021, 5:00:59 PM
component: oh-list-item
config:
icon: oh:soundvolume
title: =props.prop1
slots:
after:
- component: f7-block
config:
style:
display: inline-flex
flex-direction: row
justify-content: flex-end
padding: none
slots:
default:
- component: oh-button
config:
text: Down
outline: true
text-color: red
action: command
actionItem: =props.item1
actionCommand: OFF
style:
width: 150px
- component: oh-button
config:
text: Up
outline: true
text-color: red
action: command
actionItem: =props.item1
actionCommand: ON
style:
width: 150px
It’s the padding on the block padding: none
is wrong padding: 0px
does what you want. A quick inspect immediately showed me I’d got it wrong
yes better solution!
Great! Thanks for sharing the solution!
I find this so frustrating only because of my lack of knowledge - I have copied the code from 4 posts above and I get NOTHING showing in the widget preview?
OK so Reading Any’s other article where hes helping with my widget - it is a child of an oh-list-item so it seems the preview in the widget designer wont render it - no biggie
BTW - looks like the real thing now thanks so much!
there is a problem with the preview I don’t see anything either. I’ve also noticed another minor problem. I think the buttons are not inline with the text they seem to start on the line below.
I’ve talked to Yannick about this. Because a list item is expected to be rendered as part of list-card widget and there is no container widget to hold it in the preview, there is no way to render it.
If you look at all of the list item widgets you will find that’s the case for them all. It’s particularly pronounced with slider list items.
I was trying to apply the above to a unified widget to use for my chromecasts and failing (I want a button a slider for volume and mute and then a player and stop button for control, and if I can figure out how to put it all in one item with two rows so much the better). I might be coming back here to ask for help. But seeing the examples here is very helpful.