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
