Widget row scaling

[powerpolly (Matthias P)]

hi,

I assembled a little widget with two rows. I tweaked some time to get it nice in the widget builder page. unfortunately the formatting changes on the Overview Page and even worse, on the mobile device it’s unreadable. I understand that f7 adopts for a device screen size. is it possible to automatically reformat a widget to a one-row widget on the mobile phone but keep a two-row widget on the desktop browser?

widget builder:

overview page:

mobile device:

widget code:

uid: widget_EV_loading
tags:
props:
parameters:

• description: Titel
  label: Titel
  name: propTitel
  required: false
  type: TEXT
  parameterGroups:
  timestamp: Dec 2, 2025, 7:22:20 PM
  component: f7-card
  config:
  title: =props.propTitel
  slots:
  default:
• component: f7-row
  slots:
  default:
• component: f7-col
  config:
  slots:
  default:
• component: oh-gauge
  config:
  item: NRG_ActivePower
  labelText: Leistung Wallbox
  max: 11000
  min: 0
  style:
• width: 100%
  type: semicircle
  valueTextColor: green
• component: oh-trend
  config:
  style:
• height: 90px
  trendItem: PV_Inv_InputPower
  trendSampling: 10

            - component: oh-list
              config: {}
              slots:
                default:
                  - component: oh-list-item
                    config:
                      badge: '=(items.NRGKick.state == "ON") ? (items.NRG_Status.state) : "PowerOFF"'
                      badgeColor: '=(items.NRGKick.state == "ON") ? "green" : "red"'
                      icon: if:bi:ev-front
                      iconColor: '=(items.NRG_Status.state !== "CHARGING") ? "orange" : "green"'
                      iconUseState: true
                      item: NRG_Status
                      title: NRGKick Status
                  - component: oh-list-item
                    config:
                      action: options
                      actionItem: EV_ChargeMode
                      badge: =items.EV_ChargeMode.displayState
                      badgeColor: '=(items.EV_ChargeMode.displayState == "Sonne tanken") ? "yellow" :
                        "gray"'
                      icon: f7:sun_max
                      iconColor: '=(items.EV_ChargeMode.displayState == "Sonne tanken") ? "yellow" :
                        "green"'
                      iconUseState: true
                      title: Lademodus
                      item: EV_ChargeMode
                  - component: oh-list-item
                    config:
                      action: options
                      actionItem: NRG_ChargePause
                      badge: '=(items.NRG_ChargePause.state == "0") ? "Laden" : "Pause"'
                      badgeColor: '=(items.NRG_ChargePause.state == "0") ? "green" : "red"'
                      icon: '=(items.NRG_ChargePause.state == "0") ? "if:icon-park-outline:play" :
                        "if:heroicons-outline:pause"'
                      iconColor: '=(items.NRG_ChargePause.state == "0") ? "green" : "red"'
                      title: Charging?
                  - component: oh-slider-item
                    config:
                      color: green
                      icon: if:game-icons:path-distance
                      iconColor: green
                      item: EV_RangeLimit
                      max: 450
                      min: 50
                      scale: true
                      step: 10
                      title: Range limiter [km]
                  - component: oh-slider-item
                    config:
                      color: green
                      icon: if:ix:power-supply
                      iconColor: green
                      item: NRG_CurrentSet
                      max: 16
                      min: 6
                      scale: true
                      step: 1
                      title: (Aktueller) Ladestrom
      - component: f7-col
        slots:
          default:
            - component: oh-image
              config:
                style:
                  - display: block
                  - margin-left: auto
                  - margin-right: auto
                  - width: 80%        
                  - opacity: 0.9
                url: /static/tesla4.png
            - component: oh-list
              config: {}
              slots:
                default:
                  
                  - component: oh-list-item
                    config:
                      badge: =items.NRG_charged_energy.displayState
                      icon: if:hugeicons:renewable-energy
                      title: geladen [kW]
                  - component: oh-list-item
                    config:
                      badge: =items.NRG_charging_rate.displayState
                      icon: if:game-icons:path-distance
                      title: Laderate
                  - component: oh-list-item
                    config:
                      badge: =items.EV_chargedRange.displayState
                      icon: if:game-icons:path-distance
                      title: geladene km 
                  - component: oh-list-item
                    config:
                      badge: =items.NRG_total_charged_energy.displayState
                      icon: if:hugeicons:renewable-energy
                      iconColor: green
                      title: Geladen seit 10/2024
                  - component: oh-list-item
                    config:
                      badge: =items.NRG_Warning.displayState
                      icon: if:cuida:warning-outline
                      iconColor: orange
                      title: Warningcode
                  - component: oh-list-item
                    config:
                      badge: =items.NRG_Warning.displayState
                      icon: if:bx:error-alt
                      iconColor: red
                      title: Fehlercode                      

thanks for any advice.

[rlkoshak (Rich Koshak)]

@powerpolly

is it possible to automatically reformat a widget to a one-row widget on the mobile phone but keep a two-row widget on the desktop browser?

On the page where you’ve placed the widget, click on the widget’s configuration icon and choose “Column Options”. There you can choose ho much of the row a widget takes up for different screen sizes. This is not a property of the widget itself, but on the page where you place the widget.

[powerpolly (Matthias P)]

there is no “column options” on the widget configuration icon. I see the column option on the overview page. placing the widget directly on the overview pages is presenting my widget in a single row, even on the browser. In my case I call that widget from a “open popup action” in a label cell. on the mobilephone it is still presented as a two row widget…

[JustinG]

Because the columns are integrated into your custom widget, you will not be able to set those column width options via the page wizard menus. You can still use this method for controlling the column arrangement; you’ll just have to add the properties directly to the f7-col components in your widget code. You can see the list of column width properties here:

Grid Vue Component | Framework7 Vue Documentation

and you’re just going to select the one that represents the cutoff width when you want to go to one column and set that one to 100 (i.e., below this screen size the column should have a width of 100%).

That’s the f7 native way to achieve this. There are several other direct ways as well. For example, you could add a min-width property under style in the columns. Then whenever the screen is too narrow to show both columns at their minimum width the f7-row will wrap the second one down into a second row.

[rlkoshak (Rich Koshak)]

To control the rows and columns you need to add rows and columns.

First add a row to the page. Then add as many columns as you want. Then you will have a new menu with column options.

[powerpolly (Matthias P)]

I’m playing around with these settings but nothing changes:

- component: f7-col
            config:
              style:
                class: col-50

is this the wrong place for the width settings?

[JustinG]

@powerpolly

is this the wrong place for the width settings?

class should not be a child of the the style object, it should be its own config parameter:

- component: f7-col
  config:
    class: col-50

I never use the f7 classes, so I actually don’t know if that will work to give you the change at a certain size, but I don’t think it is supposed to.

Even if the class does work, you also won’t see any response from the column setting just by changing the card size. Those column size settings are specifically responsive to the screen size, not the size of the container they are in.

If you want to see the columns change with changing card size then you will have to use the min-width method I mentioned above.

[powerpolly (Matthias P)]

@JustinG

in-width method I mentioned ab

min-width: 360pxthat one looks good on the mobile device, however, the pop-up has again a different width and it does not look good there anymore.

then I tried Ricks approach and found that this:

- component: f7-col
            config:
              xsmall: "100"
              small: "50"
              medium: "50"
              large: "50"
              xlarge: "50"
              width: "100"

does exactly what I was looking for!

thank you both!!!