OH3 Alignment to match existing list widget

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!

Hmmm… I just double checked:

mediaList: true should work.

See my example here:

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!

widget

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 :wink:

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.

widget

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 :roll_eyes:

:+1: 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.