I'm going crazy: Aligning elements in widget

I have a simple question: I want to have the two buttons at the far right, but no matter what I do, they always stick to the label. Where’s my mistake?

uid: oh-button-action-command
tags: []
props:
  parameters:
    - description: Bezeichnung für das Item
      label: Titel
      name: title
      required: false
      type: TEXT
    - context: item
      description: Das zu schaltende Item
      label: Item
      name: item
      required: false
      type: TEXT
  parameterGroups: []
timestamp: Aug 6, 2022, 11:06:25 PM
component: f7-card
config:
  iconColor: '=(items[props.item].state == "ON") ? "yellow" : "gray"'
  color: '=(items[props.item].state == "ON") ? "yellow" : "gray"'
slots:
  default:
    - component: f7-block
      config:
        class: bog
        style:
          display: flex
          flex-wrap: wrap
          justify-content: space-between
          align-content: space-between
          padding: 20px
      slots:
        default:
          - component: f7-segmented
            slots:
              default:
                - component: f7-icon
                  config:
                    f7: lightbulb
                    size: 20
                    style:
                      position: relative
                      left: -5%
                      padding-top: 3px
                - component: Label
                  config:
                    text: =props.title
                    style:
                      font-size: 1.1em                  
                      padding-bottom: 0px
                      padding-top: 2px
                - component: oh-button
                  config:
                    text: EIN
                    outline: true
                    action: command
                    actionItem: =props.item
                    actionCommand: ON
                    active: "=(items[props.item].state === 'ON') ? true : false"
                    style:
                      width: 50px
                      float: right
                      margin-left: auto 
                      margin-right: 0
                - component: oh-button
                  config:
                    text: AUS
                    outline: true
                    action: command
                    actionItem: =props.item
                    actionCommand: OFF
                    active: "=(items[props.item].state === 'OFF') ? true : false"
                    style:
                      width: 50px

I tried it now for two hours at the button called “EIN” to apply various CSS formating styles, but none worked :frowning:

Besides that, my “EIN” button has no left frame for some strange reason…

At least I was able to fix the missing border:

                    active: "=(items[props.item].state === 'ON') ? true : false"
                    style:
                      width: 50px
                      margin-left: 10px
                      border-left: 2px !important
                      border-left-style: solid !important
                      border-radius: var(--f7-button-border-radius) 0 0 var(--f7-button-border-radius)

Seems OH sets the left border to “NONE” when a button is located in the middle

Solved it myself, thanks

1 Like