Widget with data chart - how to resize a data selector

Setup, Configuration and Use Beginners
1

I have done a widget with data chart
Question is, how to resize a data selector, becuase on the PC it’s ok, but on the cell phone too big :

image
image1042×345 12.7 KB

and smaller screen :

image

2

There is no direct control of the size of the data selector. It may be worthwhile to file this as an issue, because the UI itself should adapt such things to mobile screens.

However, if you want to deal with this yourself, you’re going to have to use a more indirect route. I’ve not done this before, but I can make some guesses. There are some f7 variables relating to menus (the data selector is an f7-menu component). You could try setting something --f7-menu-item-height in the style property of the component that holds the chart:

component: f7-card
config:
  style:
    --f7-menu-item-height: 12px
slots:
  default:
    - component: oh-chart
      config:
...

You’ll probably have to spend some time using the page inspector of your browser to find all the variables you need to modify.

The other alternative is to use a stylesheet to target the entire menu and just scale it down.

component: f7-card
config:
  stylesheet: >
    .menu {
      transform: Scale(.5);
    }
slots:
  default:
    - component: oh-chart
      config:
...

The problem with this is that you can’t change the stylesheet definition dynamically. That means if you want a different scale for desktop and mobile views, you’ll have to combine those two methods with your own css variable:

component: f7-card
config:
  style:
    --my-chart-menu-size: =(device.desktop)?(1):(.5)
  stylesheet: >
    .menu {
      transform: Scale(var(--my-chart-menu-size));
    }
slots:
  default:
    - component: oh-chart
      config:
...
3

Yes, it’s working. Thank you

4

Please can you share your code of how to got this working?

Using:

                --f7-menu-font-size: 15px
                --f7-menu-item-height: 30px

Produces:
image

However using:

                --f7-menu-font-size: =(device.desktop)?(15px):(10px)
                --f7-menu-item-height: =(device.desktop)?(30px):(20px)

Produces:
image

Any ideas why?

5

here is a part of code where it’s implemented:

timestamp: Nov 15, 2023, 5:28:29 PM
component: f7-card
config:
  style:
    --my-chart-menu-size: =(device.desktop)?(1):(.5)
    background-color: "=props.bgcolor ? props.bgcolor : ''"
    border-radius: var(--f7-card-expandable-border-radius)
    box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.1)
    margin-left: 5px
    margin-right: 5px
    noShadow: false
    padding: 0px
  stylesheet: >
    .menu {
      transform: Scale(var(--my-chart-menu-size));
    }
slots:
  content:
    - component: f7-block
      config:
        style:
          --f7-theme-color: var(--f7-text-color)
          margin: 0
          padding: 0
      slots:
        default:
          - component: f7-row
            slots:
              default:
                - component: f7-col
                  config:
                    style:
                      margin-top: -20px
                      width: 100%
                  slots:
                    default:
                      - component: oh-chart
1 Like