Problems with positioning in my custom widgets

Add-ons UIs
1

Hello everyone,

I’m new to the forum and have to ask for help right away.
I am currently in the process of creating a custom widget for my rooms, but I have encountered 2 problems:

  1. How can i center my icon over the text?
    grafik

  2. How can i reduce the space between the icon and the text? I tried to override margin and padding, but the space is getting bigger not smaller

uid: roomWidget
tags: []
props:
  parameters:
    - context: item
      description: Item for the actual temperature
      label: Actual Temperature
      name: ActualTemperature
      required: false
      type: TEXT
    - context: item
      description: Item for the target temperature
      label: Target Temperature
      name: TargetTemperature
      required: false
      type: TEXT
    - context: item
      description: Item for the humidity
      label: Humidity
      name: Humidity
      required: false
      type: TEXT
    - context: text
      label: Title
      name: Title
      required: false
      type: TEXT
    - context: text
      label: Icon
      name: Icon
      required: false
      type: TEXT
  parameterGroups: []
timestamp: Nov 17, 2023, 9:37:07 PM
component: f7-card
config:
  style:
    --font-size-small: 15px
    --font-size-normal: 20px
    border-radius: 10px
slots:
  default:
    - component: f7-row
      slots:
        default:
          - component: f7-col
            config:
              style:
                width: auto
                align-items: center
                justify-content: center
            slots:
              default:
                - component: oh-icon
                  config:
                    icon: =props.Icon
                    height: 30
                    style:
                      margin-right: 7px
                - component: Label
                  config:
                    text: =props.Title
                    style:
                      font-size: var(--font-size-normal)
                      margin-right: 10px
          - component: f7-col
            config:
              style:
                flex: 1
            slots:
              default:
                - component: f7-row
                  slots:
                    default:
                      - component: f7-row
                        config:
                          style:
                            align-items: center
                        slots:
                          default:
                            - component: f7-icon
                              config:
                                f7: thermometer
                                style:
                                  font-size: var(--font-size-normal)
                            - component: Label
                              config:
                                text: =items[props.ActualTemperature].state + " (" + items[props.TargetTemperature].state + ")"
                                style:
                                  font-size: var(--font-size-small)
                - component: f7-row
                  slots:
                    default:
                      - component: f7-row
                        slots:
                          default:
                            - component: f7-row
                              config:
                                visible: true
                              slots:
                                default:
                                  - component: f7-row
                                    config:
                                      style:
                                        align-items: center
                                    slots:
                                      default:
                                        - component: f7-icon
                                          config:
                                            f7: drop
                                            style:
                                              font-size: var(--font-size-normal)
                                        - component: Label
                                          config:
                                            text: =items[props.Humidity].state
                                            style:
                                              font-size: var(--font-size-small)

I hope someone can help me.

2

Welcome to OH.

It will be easier for us to give you a specific response if you also include the widget code you are working with. You can just copy the yaml from the widget editor and paste it between code fences:

```
Code here
```

Without the details of what you have there I can only make some rough guesses about what layout you already have, so I can’t really give you solutions.

3

Oh sorry i forgot to copy the code … I updated my post.

4

Right now, because these two are in the same f7-col component, you’ve got every thing you need except for one piece: the f7-col isn’t set to display: flex by default, it’s display: block so your align and justify declarations are being ignored. Just set the f7-col to be a flex column:

- component: f7-col
  config:
    style:
      width: auto
      align-items: center
      justify-content: center
      display: flex
      flex-direction: column

And your icon will be centered.

This will probably be fixed by the same settings as above. Neither the icon nor the label class have any predefined margins or padding so they should be right up against each other when they are subject to the flex spacing.

1 Like
5

Thank you for youre help