# Main UI - F7 expandable card

**URL:** <https://community.openhab.org/t/main-ui-f7-expandable-card/155561>\
**Category:** Beginners\
**Tags:** widget, main-ui\
**Created:** [April 24, 2024, 11:00am UTC](https://community.openhab.org/t/main-ui-f7-expandable-card/155561 "2024-04-24T11:00:44Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Jacek\_Kaczmarczyk](https://community.openhab.org/user_avatar/community.openhab.org/jacek_kaczmarczyk/32/58513_2.png) [@Jacek\_Kaczmarczyk](https://community.openhab.org/u/Jacek_Kaczmarczyk)\
**Post date:** [April 24, 2024, 11:00am UTC](https://community.openhab.org/t/main-ui-f7-expandable-card/155561/1 "2024-04-24T11:00:44Z")

</div>

Hi, i need some help with making a expandable widget.  
I reused some code from the forum but expanding the widget gives me some unexpected result the main part of the widget is scaling to the windows and looses the original px sizes.

What is the right way to expand the widget and keep the predefined sizes?

uid: semanticHomeMenu\_RadiatorControl  
tags:   
props:  
parameters:  
- description: Item Name  
name: itemname  
required: true  
type: TEXT  
groupName: labeling  
- description: Room Name  
name: roomname  
required: false  
type: TEXT  
groupName: labeling  
- context: item  
description: Switch Item  
label: Item  
name: switchitem  
required: false  
type: TEXT  
groupName: items  
- context: item  
description: Dimmer Item  
label: Item  
name: dimmeritem  
required: false  
type: TEXT  
groupName: items  
- description: Icon name (Dynamic icons are supported)  
name: icon  
required: false  
type: TEXT  
groupName: icons  
- description: OFF = Horizontal orientation | ON = Vertical orientation.  
label: Vertical toggle orientation.  
name: switchorientation  
required: false  
type: BOOLEAN  
groupName: items  
- description: Card background color | “ON” state  
name: bgcolorON  
required: false  
type: TEXT  
groupName: facecolors  
- description: Card background color | “OFF” state  
name: bgcolorOFF  
required: false  
type: TEXT  
groupName: facecolors  
- description: Switch backround color | “ON” state  
name: switchONbgcolor  
required: false  
type: TEXT  
groupName: facecolors  
- description: Switch background color | “OFF” state  
name: switchOFFbgcolor  
required: false  
type: TEXT  
groupName: facecolors  
- description: Switch handle color | “ON” state  
name: switchhandleONcolor  
required: false  
type: TEXT  
groupName: facecolors  
- description: Switch handle color | “OFF” state  
name: switchhandleOFFcolor  
required: false  
type: TEXT  
groupName: facecolors  
- description: Slider Color  
name: sliderbgcolor  
required: false  
type: TEXT  
groupName: facecolors  
- description: Slider label background color (dimmervalue background)  
name: sliderlabelbgcolor  
required: false  
type: TEXT  
groupName: facecolors  
- description: Font color device name.  
name: devicefontcolor  
required: false  
type: TEXT  
groupName: fontcolors  
- description: Font color room name.  
name: roomfontcolor  
required: false  
type: TEXT  
groupName: fontcolors  
- description: Label font color (dimmervalue).  
name: dimmerlabelfontcolor  
required: false  
type: TEXT  
groupName: fontcolors  
parameterGroups:  
- name: labeling  
label: Name definitions  
description: Please enter a name for device and location.  
- name: icons  
label: Icon names.  
description: Please enter an icon name, e.g., lightbulb. Move (dynamic) icons  
into the conf/icons/classic/ directory.  
- name: items  
label: Widget Items  
- name: facecolors  
label: Face Colors  
description: Please enter color informations for the indivual face elements. No  
value = default widget element color. Use values like rgba(250, 0, 0, 1)  
for red or simply use the color name, e.g., red,blue,pink.  
- name: fontcolors  
label: Font/Text Colors  
description: Please enter color values for the indivual text element. No value =  
default widget text color.  
timestamp: Apr 24, 2024, 12:35:51 PM  
component: f7-card  
config:  
class:  
- card-expandable  
expandable: true  
backdrop: false  
style:  
height: 500px  
margin: 5px  
margin-top: 10px  
swipeToClose: true  
slots:  
default:  
- component: oh-slider  
config:  
class:  
- card-prevent-open  
item: =props.dimmeritem  
label: true  
max: 100  
min: 0  
releaseOnly: true  
scale: false  
step: 1  
style:  
–f7-range-bar-active-bg-color: ‘=props.sliderbgcolor ? props.sliderbgcolor : “rgba(120, 0, 120, 1)”’  
–f7-range-bar-bg-color: ‘=!items[props.switchitem].state == “ON” ?  
“transparent” : “transparent”’  
–f7-range-bar-border-radius: 10px  
–f7-range-bar-size: 120px  
–f7-range-knob-color: transparent  
–f7-range-knob-size: 20px  
–f7-range-label-bg-color: ‘=!props.sliderlabelbgcolor == “” ?  
props.sliderlabelbgcolor : “rgba(170, 0, 170, 0.5)”’  
–f7-range-label-border-radius: 5px  
–f7-range-label-font-size: 50px  
–f7-range-label-font-weight: 400  
–f7-range-label-padding: 10px 20px  
–f7-range-label-size: 40px  
–f7-range-label-text-color: ‘=props.dimmerlabelfontcolor ?  
props.dimmerlabelfontcolor : “rgba(240, 210, 240, 1)”’  
height: 120px  
position: absolute  
top: 0px  
left: 0px  
width: 90%  
unit: “%”  
visible: “=props.dimmeritem ? true : false”  
- component: oh-toggle  
config:  
class:  
- card-prevent-open  
- ‘=props.switchorientation ? “large-vertical-toggle” : “”’  
item: =props.switchitem  
style:  
–f7-theme-color: ‘=props.switchONbgcolor ? props.switchONbgcolor :  
“rgba(170,0,170,1)”’  
–f7-toggle-border-color: rgba(0,0,0,0.5)  
–f7-toggle-handle-color: ‘=items[props.switchitem].state == “OFF” &&  
!props.switchhandleOFFcolor ? “rgba(60,60,60,1)” :  
items[props.switchitem].state == “OFF” && props.switchhandleOFFcolor  
? props.switchhandleOFFcolor : items[props.switchitem].state == “ON”  
&& !props.switchhandleONcolor ? “rgba(255,255,255,1)” :  
items[props.switchitem].state == “ON” && props.switchhandleONcolor ?  
props.switchhandleONcolor : items[props.switchitem].state == “OFF”  
&& !props.switchhandleOFFcolor && !props.switchhandleONcolor ?  
“rgba(60,60,60,1)” : items[props.switchitem].state == “ON” &&  
!props.switchhandleOFFcolor && !props.switchhandleONcolor ?  
“rgba(255,255,0,1)” : “”’  
–f7-toggle-height: ‘=props.switchorientation ? “20px” : “40px”’  
–f7-toggle-inactive-color: ‘=props.switchOFFbgcolor ? props.switchOFFbgcolor :  
“rgba(20,20,20,1)”’  
–f7-toggle-width: ‘=props.switchorientation ? “40px” : “80px”’  
position: absolute  
right: 10%  
top: 35px  
visible: “=props.switchitem ? true : false”  
- component: f7-row  
config:  
style:  
overflow: hidden  
pointer-events: none  
position: absolute  
text-overflow: ellipse  
top: 35px  
user-select: none  
white-space: nowrap  
width: 100%  
slots:  
default:  
- component: f7-col  
config:  
style:  
left: 2%  
position: relative  
slots:  
default:  
- component: f7-row  
slots:  
default:  
- component: f7-col  
config:  
style:  
min-width: 50px  
width: 10  
slots:  
default:  
- component: oh-icon  
config:  
height: 55  
icon: ‘=props.icon ? props.icon : “lightbulb”’  
state: “=props.dimmeritem ? items[props.dimmeritem].state :  
items[props.switchitem].state”  
style:  
left: calc(50% - 27px)  
pointer-events: none  
top: calc(50% - 27px)  
user-select: none  
- component: f7-col  
config:  
width: 40  
slots:  
default:  
- component: f7-row  
slots:  
default:  
- component: f7-col  
config:  
id: itemdescfooter  
slots:  
default:  
- component: Label  
config:  
style:  
color: ‘=props.devicefontcolor ? props.devicefontcolor : “rgba(240, 210, 240,  
1)”’  
font-size: 30px  
font-weight: 400  
left: 0  
line-height: 30px  
mix-blend-mode: brighten  
padding: 0px  
text-shadow: 0px 2px 15px rgba(0, 0, 0,0.2)  
user-select: none  
text: ‘=props.itemname ? props.itemname : “Nazwa”’  
- component: f7-row  
slots:  
default:  
- component: f7-col  
config:  
id: itemdescfooter  
slots:  
default:  
- component: Label  
config:  
style:  
color: ‘=props.roomfontcolor ? props.roomfontcolor : “rgba(200,200,200,0.6)”’  
font-size: 16px  
left: 0  
line-height: 16px  
mix-blend-mode: brighten  
padding: 2px  
pointer-events: none  
text-shadow: 0px 0px 10px rgba(0, 0, 0,0.2)  
user-select: none  
text: ‘=props.roomname ? props.roomname : “Lokalizacja”’  
- component: f7-col  
config:  
id: spacer  
width: 50  
slots:  
default:  
- component: Label  
config:  
style:  
color: rgba(250,250,250,0.6)  
font-size: 25px  
left: 0  
line-height: 50px  
pointer-events: none  
text-align: left  
text-shadow: 2px 2px 5px rgba(0,0,0,0.2)  
user-select: none  
- component: oh-button  
config:  
class:  
- cell-open-button  
- card-opened-fade-out  
color: gray  
iconF7: ellipsis  
iconSize: 50px  
style:  
padding-bottom: 0px  
padding-right: 0px  
padding-top: 0px  
position: absolute  
right: 20px  
top: 0px  
z-index: 999

```auto
type or paste code here

```

---

<div class="post-metadata">

**Author:** ![JustinG](https://community.openhab.org/user_avatar/community.openhab.org/justing/32/55948_2.png) [@JustinG](https://community.openhab.org/u/JustinG)\
**Post date:** [April 24, 2024, 3:32pm UTC](https://community.openhab.org/t/main-ui-f7-expandable-card/155561/2 "2024-04-24T15:32:20Z")

</div>

You missed the code fences with your widget code, so it’s hard to tell exactly, but I think you just want to add `--f7-card-expandable-tablet-width` to the style of the card with the width that you want the opened card to have.