Some weird margin in the custom widget

Hi All
So I designed that lovely room widget

That in the designer looks perfectly fine, it has 3 rows minimal padding.

However when i place it in the grid layout for the tablet it gets some weird issues with scaling
and margins


Either the contend do not fit into the size or when I strech it get some bogus margin.

inspect tells me that content top margin is auto and takes value of 45

Can anyone of the F7 gods help me out with this one?

here is the code:

uid: universal_Room_switch
tags: []
props:
  parameters:
    - default: Title
      description: Title of the card
      label: Title
      name: title
      required: false
      type: TEXT
    - description: The card footer
      label: Footer
      name: footer
      required: false
      type: TEXT
    - default: "1"
      description: Stroke for icon
      label: Stroke for icon
      name: stroke
      required: true
      type: TEXT
    - default: oh-bulb
      description: Name of the Icon
      label: OH Icon
      name: icon
      required: true
      type: TEXT
    - default: 60px
      description: Size of the Icon
      label: OH Icon size with add pz
      name: icon_size
      required: true
      type: TEXT
    - default: yellow
      description: Color scheme for icons and toggles (see
        https://framework7.io/docs/color-themes.html for available color
        schemes)
      label: Color
      name: color
      required: true
      type: TEXT
    - context: item
      description: Main toggle item (use for single toggle or as main switch for group)
      label: Item
      name: maintoggle
      required: false
      type: TEXT
    - context: item
      description: Upper left temp item to display
      label: temp
      name: temp
      required: false
      type: TEXT
    - context: item
      description: Upper right temp item to display
      label: humidity
      name: humidity
      required: false
      type: TEXT
    - description: Bottom left text to display
      label: switch_description
      name: switch_description
      required: false
      type: TEXT
    - context: item
      description: Bottom right temp item to display
      label: power_meter
      name: power_meter
      required: false
      type: TEXT
  parameterGroups: []
timestamp: Feb 24, 2025, 3:54:12 PM
component: f7-card
config:
  title: =(props.title)
  style:
    min-height: 100px
    --f7-card-content-padding-vertical: 0px
    --f7-card-content-padding-horizontal: 8px
    --f7-card-content-margin-vertical: 0px
    --f7-card-header-padding-horizontal: 8px
    margin: 0px
slots:
  default:
    - component: f7-card-content
      slots:
        default:
          - component: f7-row
            config:
              style:
                height: 20%
                width: 100%
                margin-top: 0px !important
            slots:
              default:
                - component: f7-col
                  config:
                    style:
                      height: 100%
                      width: 50%
                  slots:
                    default:
                      - component: Label
                        config:
                          text: =items[props.temp].displayState
                          style:
                            text-align: left
                            font-size: 14px
                            font-weight: 500
                - component: f7-col
                  config:
                    style:
                      height: 100%
                      width: 50%
                  slots:
                    default:
                      - component: Label
                        config:
                          text: =items[props.humidity].displayState
                          style:
                            text-align: right
                            font-size: 14px
                            font-weight: 500
          - component: f7-row
            config:
              class:
                - display-flex
                - flex-direction-column
                - align-items-center
                - justify-content-space-evenly
              style:
                height: 80%
                width: 100%
            slots:
              default:
                - component: oh-link
                  config:
                    action: toggle
                    actionItem: =props.maintoggle
                    actionCommand: ON
                    actionCommandAlt: OFF
                  slots:
                    default:
                      - component: oh-icon
                        config:
                          color: '=items[props.maintoggle].state == "ON" ? "#ffcc00" :
                            items[props.maintoggle].state > 0 ? props.color :
                            "gray"'
                          icon: =props.icon
                          height: =props.icon_size
                          style:
                            stroke-width: =props.stroke
                - component: oh-toggle
                  config:
                    colorTheme: =props.color
                    item: =props.maintoggle
                    style:
                      padding-top: 10px
                      transform: scale(1.5)
          - component: f7-row
            config:
              style:
                height: 20%
                width: 100%
                padding-top: 25px
            slots:
              default:
                - component: f7-col
                  config:
                    style:
                      height: 100%
                      width: 50%
                  slots:
                    default:
                      - component: Label
                        config:
                          text: =props.switch_description
                          style:
                            text-align: left
                            font-size: 14px
                            font-weight: 200
                - component: f7-col
                  config:
                    style:
                      height: 100%
                      width: 50%
                  slots:
                    default:
                      - component: Label
                        config:
                          text: =items[props.power_meter].displayState
                          style:
                            text-align: right
                            font-size: 14px
                            font-weight: 500

You are applying the top margin value with the important override to the row inside the card content. The grid page has a css directive that impacts card content itself (I don’t know what the reasoning behind that is, I never use the grid layout). So you need to have top and bottom margin declarations in the style object of the card content component as well.

1 Like

that margin-top: 0px !important was a desperate attempt to get rid of the margin, and indeed it was misplaced So I moved it up to the card-content and now it respected.

That is a bit PITA that this margin-top: auto somehow generates way to large margins seemingly not related to what size you size in the widget the grid layout.

That is a final code I used.

- component: f7-card-content
      config:
        style:
          margin-top: 2% !important