How center widget label and reduce free space?

[Dom_KS]

Hello.
How can I center Label on widget and reduce space/size of widget?
As a base I used universal_toggle_v3 from marketplace.

uid: universal_toggle_v3_mod1
tags: []
props:
  parameters:
    - description: Title of the card
      label: Title
      name: title
      required: false
      type: TEXT
    - description: Name of the Icon (see https://framework7.io/icons/ for available icons)
      label: F7 Icon
      name: icon
      required: true
      type: TEXT
    - 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
    - description: Group toggles (use as group with or without main toggle)
      label: Group toggle Array
      name: grouptogglearray
      required: false
      type: TEXT
  parameterGroups: []
timestamp: Feb 3, 2023, 10:15:15 PM
component: f7-card
config:
  title: =(props.title)
slots:
  default:
    - component: f7-card-content
      slots:
        default:
          - component: f7-swiper
            config:
              init: true
              pagination: "=(props.maintoggle) && (props.grouptogglearray) ? true : false"
              params:
                slidesPerView: 1
                pagination:
                  clickable: true
              style:
                width: 100%
                height: 100px
            slots:
              default:
                - component: f7-swiper-slide
                  config:
                    visible: "=(props.maintoggle) ? true : false"
                    style:
                      width: 100%
                      height: 100%
                  slots:
                    default:
                      - component: f7-col
                        config:
                          class:
                            - display-flex
                            - flex-direction-column
                            - align-items-center
                            - justify-content-space-evenly
                          style:
                            width: 100%
                            height: 100%
                        slots:
                          default:
                            - component: f7-icon
                              config:
                                f7: =props.icon
                                size: '=(props.grouptogglearray) ? "50" : "60"'
                                color: '=items[props.maintoggle].state == "ON" ? props.color : "gray"'
                            - component: oh-toggle
                              config:
                                item: =props.maintoggle
                                colorTheme: =props.color
                            - component: f7-block
                              config:
                                style:
                                  height: 35px
                                  display: '=(props.grouptogglearray) ? "block" : "none"'
                - component: f7-swiper-slide
                  config:
                    visible: "=(props.grouptogglearray) ? true : false"
                  slots:
                    default:
                      - component: f7-swiper
                        config:
                          scrollbar: true
                          params:
                            slidesPerView: 1
                            direction: vertical
                            mousewheel: true
                            scrollbar:
                              hide: true
                          style:
                            width: 100%
                            height: 100%
                        slots:
                          default:
                            - component: oh-repeater
                              config:
                                for: item
                                in: =props.grouptogglearray.split("|")
                                fragment: true
                              slots:
                                default:
                                  - component: f7-swiper-slide
                                    config:
                                      style:
                                        width: 100%
                                        height: 100%
                                    slots:
                                      default:
                                        - component: f7-col
                                          config:
                                            class:
                                              - display-flex
                                              - flex-direction-column
                                              - align-items-center
                                              - justify-content-space-evenly
                                            style:
                                              width: 100%
                                              height: 100%
                                          slots:
                                            default:
                                              - component: f7-block-title
                                                config:
                                                  style:
                                                    margin-top: 5px
                                                    margin-bottom: -2px
                                                slots:
                                                  default:
                                                    - component: Label
                                                      config:
                                                        text: =loop.item.split("\"")[1]
                                              - component: f7-icon
                                                config:
                                                  f7: =props.icon
                                                  size: 50
                                                  color: '=items[loop.item.split("\"")[3]].state == "ON" ? props.color : "gray"'
                                              - component: oh-toggle
                                                config:
                                                  item: =(loop.item.split("\"")[3])
                                                  colorTheme: =props.color
                                              - component: f7-block
                                                config:
                                                  style:
                                                    height: 5px
                                                    display: '=(props.maintoggle) ? "block" : "none"'

[Dom_KS]

I’ve got one more idea. Is it posible to remove whole switch?

[JustinG]

@Dom_KS

How can I center Label on widget

In this case you need to apply a css style directly to the card header. The only way to do that in a widget is with the stylesheet property:

component: f7-card
config:
  title: =(props.title)
  stylesheet: >
    .card-header {
      justify-content: center;
    }

@Dom_KS

reduce space/size of widget?

This is also css styling, but in this case you can just use the style property of each individual component that you want to change. The quickest way to work out what you want to change is to “inspect” the the element using your browser’s developer tools and look at it’s margin and padding properties. Then override the properties you want to change with something like

style:
  margin-top: some-smaller-value

@Dom_KS

I’ve got one more idea. Is it posible to remove whole switch?

It sure is. If you change your f7-icon to an oh-icon then you can take advantage of the oh actions which include toggling an item’s state:

oh-icon - Icon