OH3 Alignment to match existing list widget

I’m trying to create a list type widget that allows for 2 buttons to do Volume control for my amps. I would like them to match the standard ones. As you can see I am almost there but I think I am probably going about this the wrong way. Can someone please have a look at see what I am doing wrong? I can’t see where OH3 stores the built in widget formatting - I assume I can use that.
Thanks

widget

   uid: Volume_control
    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:09:49 PM
    component: f7-card
    config:
      textColor: gray
      style:
        --f7-card-margin-vertical: 0px
        --f7-card-margin-horizontal: 0px
        --f7-card-content-padding-horizontal: 0px
        --f7-card-content-padding-vertical: 0px
        --f7-card-border-radius: 0px
        --f7-card-outline-border-color: "#333333"
    slots:
      default:
        - component: f7-card-content
          slots:
            default:
              - component: f7-row
                config:
                  noGap: true
                  style:
                    align-items: left
                slots:
                  default:
                    - component: f7-icon
                      config:
                        f7: speaker_3
                        style:
                          font-weight: bold
                          width: 20%
                    - component: Label
                      config:
                        text: =props.buttonname
                        style:
                          font-size: 14px
                          font-weight: bold
                          width: 25%
                    - component: f7-segmented
                      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

Replace the f7-row with a oh-list-item and add the buttons in the after-start slot of this oh-list-item instead.

See an example here:

Search for after-start in the widget code

Thanks for the reply - I tried this but it does not seem to work?

  uid: Volume_control
    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 4, 2021, 8:53:47 AM
    component: f7-card
    slots:
      default:
        - component: f7-card-content
          slots:
            default:
              - component: oh-list-item
                config:
                  title: =props.buttonname
                  icon: light
                slots:
                  after-start:
                    - component: oh-button
                      config:
                        text: Down
                        outline: false
                        text-color: red
                        action: command
                        actionItem: =props.item1
                        actionCommand: OFF
                    - component: oh-button
                      config:
                        text: Up
                        outline: false
                        text-color: red
                        action: command
                        actionItem: =props.item1
                        actionCommand: ON

Oh sorry, you need to put the list-item in a f7-list component. Apart from that it looks ok to me

We are getting close but no cigar yet :grinning: I can’t get an icon to diplay and the button need to right align.

uid: Volume_control
tags: []
props:
  parameters:
    - description: Volume to control
      label: Description
      name: buttonname
      required: true
      type: TEXT
    - context: item
      description: Item choice
      label: Volume Item
      name: item1
      required: true
      type: TEXT
timestamp: Feb 4, 2021, 12:18:20 PM
component: f7-card
slots:
  default:
    - component: f7-list
      slots:
        default:
          - component: f7-list-item
            config:
              iconF7: speaker
              title: =props.buttonname
            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

Regarding the icon:

Setting the mediaList attribute of f7-list to true and the mediaItem attribute in the list item as well should do the trick

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: