OH flex alignment

Andrew_Pawelski · February 4, 2021, 5:45am

I am trying to create a widget with three buttons but look like it belongs in a list item. ive gone a certain way but now need to be able to conttrol the alignment and margins of the text so it is aligned left with a margin (“Speed” below) - can anyone help?

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:29:55 AM
component: f7-row
config: {}
slots:
  default:
- component: f7-col
  slots:
    default:
      - component: oh-icon
        config:
          class:
            - margin
            - flex-direction-column
          icon: light
          height: 32
- component: f7-col
  slots:
    default:
      - component: Label
        config:
          class:
            - margin
            - flex-direction-column
          text: Speed
          style:
            font-size: 20px
            font-weight: bold
- component: f7-col
  slots:
    default:
      - component: oh-button
        config:
          action: options
          actionItem: 
          class:
            - margin
            - flex-direction-column
          icon-f7: goforward_30
          iconColor: yellow
          size: 20
          text:
          style:
            --f7-button-bg-color: transparent
            --f7-button-hover-bg-color: transparent
            font-size: 12px
            height: auto
- component: f7-col
  slots:
    default:
      - component: oh-button
        config:
          action: options
          actionItem: 
          class:
            - margin
            - flex-direction-column
          icon-f7: goforward_60
          iconColor: green
          size: 20
          text: 
          style:
            --f7-button-bg-color: transparent
            --f7-button-hover-bg-color: transparent
            --f7-button-pressed-bg-color: transparent
            font-size: 12px
            height: auto
- component: f7-col
  slots:
    default:
      - component: oh-button
        config:
          action: options
          actionItem: 
          class:
            - margin
            - flex-direction-column
          icon-f7: goforward_90
          iconColor: red
          size: 20
          text: 
          style:
            --f7-button-bg-color: transparent
            --f7-button-hover-bg-color: transparent
            --f7-button-pressed-bg-color: transparent
            font-size: 12px
            height: auto

DrRSatzteil · February 4, 2021, 6:25am

I fiddled around with that myself a bit. Try to use a oh-list-item with media (your lightbulb) and label “Speed”. Add your buttons in the After-Start slot:

I’m on the phone so indentation is surely broken but I think you get the idea:

 component: f7-list
                              config:
                                mediaList: true
                              slots:
                                 default:
                                    - component: oh-list-item
                                          config:
                                            mediaItem: true
                                            f7-icon: ...
                                            ...
                                          slots:
                                            after-start:
                                              - component: oh-button
                                                config:
                                                  ...
                                             - component: oh- button
...

Andrew_Pawelski · February 4, 2021, 10:36am

Thanks for your help - I cant get it to look anything like it does now but i dont think Im following (understanding) your method to translate to my widget - I think the after-start slot might be a clue though

DrRSatzteil · February 4, 2021, 10:44am

Maybe I did not read your post well enough: You want to keep the buttons where they are but put the “Speed” label under the icon? Is that correct? Then I think you would need to use a f7-col for your icon and Text to align underneath.

Andrew_Pawelski · February 4, 2021, 12:04pm

Not quite, I want to make it look like a list item

The Speed word aligned under the Fan Light and the three buttons aligned on the right (same as the rollershutter control)

DrRSatzteil · February 4, 2021, 12:07pm

Ok good.

Please have a look at this thread as well:

Maybe we can combine forces to solve both of your problems at the same time

AndyMB · February 4, 2021, 2:45pm

hi @Andrew_Pawelski

Result:

How I worked this out:

added the standard media list item to a List Card
used F12/Inspect to look at the html tags for the media control buttons

worked out that the div.item-after was used as the container for the media control buttons
checked out what slots are available for the standard list component
changed the main containing object to oh-list-item which is a “child” of the standard one.
used the after slot to add your buttons (you will probably have seen default used as the slot name, but there are often other slots available, in this case default = div.item-inner = icon + title).
put the icons into a block container and set flexbox properties to display in a row and to the right (end). Without this they were displayed in a column, possibly because of your - flex-direction-column class (that I’ve removed).
removed excessive margin styling on the block container and icon (so they aligned with the sample media control buttons.

I’m going to try and implement some ‘radio buttons’ using this technique. Hope this helps, Andy

YAML:

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, 1:50:31 PM
component: oh-list-item
config:
  icon: oh:light
  title: Speed
slots:
  after:
    - component: f7-block
      config:
        style:
          display: inline-flex
          flex-direction: row
          justify-content: flex-end
          padding: 0px
      slots:
        default:
          - component: oh-button
            config:
              action: options
              icon-f7: goforward_30
              iconColor: yellow
              size: 20
              style:
                --f7-button-bg-color: transparent
                --f7-button-hover-bg-color: transparent
                font-size: 12px
                height: auto
          - component: oh-button
            config:
              action: options
              icon-f7: goforward_60
              iconColor: green
              size: 20
              style:
                --f7-button-bg-color: transparent
                --f7-button-hover-bg-color: transparent
                --f7-button-pressed-bg-color: transparent
                font-size: 12px
                height: auto
          - component: oh-button
            config:
              action: options
              icon-f7: goforward_90
              iconColor: red
              size: 20
              style:
                --f7-button-bg-color: transparent
                --f7-button-hover-bg-color: transparent
                --f7-button-pressed-bg-color: transparent
                font-size: 12px
                height: auto

AndyMB · February 8, 2021, 4:40pm

Hi @Andrew_Pawelski,

Your post seems to have been one of the ones lost in the recent forum software upgrade issue. Can you do me a favor and post the whole widget code that you are currently having problems with. I’ll be able to take a look.

I have seen behavior similar to what you described… in my case a button with a text property of Don't panic was causing the system to behave weird… single quote/apostrophe being the issue.

Andy