Hi,
I have a widget with two raws, one for EG shutters and one for OG shutters. But I am not able to get the standard size of a widget. What do I make wrong?
And additional how I can get the same writing like “Hoftor” to the left of my widget?
The default card and cell widgets all have their height fixed at 120 pixels. So if you want you card to match that height then you just need to add height: 120px to the style of the card. This will probably have some other consequence with the position of the rows inside the card, so you will have to adjust those as well.
The widgets you are comparing to are oh-cell widgets. The user can add and configure these as simple single components, but they are, in fact, complex, compound elements. For example, the title element that you are comparing to is created by the following vue code:
If you want to replicate that exactly, you would need to build up your own version by adding each of those extra components (and all of the OH specific css or classes that applies to each of those).
If you are 100% set on having this feature, it is possible, but time consuming and requires getting up to speed on reading the OH vue files to understand what you need to add and what you don’t.
The alternative is just to use the oh-cell as your base component instead. Then all the extra components you’ve added will be available when you click on the cell and expand it’s contents and you will be able to easily match the style and configuration of the other pieces with simple properties such as adding title: Your widget title to the oh-cell.
I try out a lot of things, but I dont get what I want. I have problems with the structure of rows and columns and the size at the smartphone. Would you mind to helping me? I want two central rollershuter controls in one widge like the picture.
That would be very nice.
best regards,
Martin
You are over complicating the structure of the widget. From the example image you posted, you want one row of four columns. You don’t need more containers than:
card
row
column
column
column
column
Other considerations:
You want to take up the whole card, so the row has to have size styles set to so that. For example, height and width (and box-sizing will make your life a little easier).
For ease of use the column with the set buttons probably need to be a little wider than up/down columns. So, we’ll take advantage of the flex-box spacing that the f7-row provides and just give the wider columns a larger share of the flex distribution.
You want the columns within the row to stack their child items vertically. So, we’ll give them their own flex display and make sure it’s turned to column spacing.
The end result looks like this:
Here’s the modified code (with some notes that match the above observations):
uid: test
tags: []
props:
parameters:
- description: A text prop
label: Prop 1
name: prop1
required: false
type: TEXT
- context: item
description: An item to control
label: Item
name: item
required: false
type: TEXT
parameterGroups: []
timestamp: Dec 13, 2024, 3:08:08 PM
component: f7-card
config:
style:
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)
height: 120px
margin-left: 5px
margin-right: 5px
noShadow: false
padding: 0
slots:
default:
#This is the main row
- component: f7-row
config:
style:
#Let's get it sized to take up the entire card
box-sizing: border-box
width: 100%
height: 100%
padding: 15px
#Make sure that it won't try to put any columns in a second row
flex-wrap: nowrap
#Make the spacing of the rows pretty
align-items: center
justify-content: space-between
slots:
default:
- component: f7-col
config:
style:
#Give the column 50% more width than the default
flex: 1.5
#Make the column display its children in an auto-spaced vertical stack
display: flex
flex-direction: column
slots:
default:
- component: Label
config:
text: EG
- component: oh-button
config:
action: options
actionItem: =props.itemEG
actionOptions: 75=25%,50=50%,25=75%
fill: fill
text: SET
- component: f7-col
config:
style:
#Make sure that the buttons take up the whole vertical space
height: 100%
#Make the column display its children in an auto-spaced vertical stack
display: flex
flex-direction: column
justify-content: space-between
slots:
default:
- component: oh-link
config:
actionItem: =props.itemEG
actionCommand: UP
action: command
colorTheme: gray
iconF7: arrow_up_circle
iconSize: 25
- component: oh-link
config:
actionItem: =props.itemEG
actionCommand: STOP
action: command
iconF7: stop_circle
iconSize: 25
- component: oh-link
config:
actionItem: =props.itemEG
actionCommand: DOWN
action: command
colorTheme: gray
iconF7: arrow_down_circle
iconSize: 25
- component: f7-col
config:
style:
flex: 1.5
display: flex
flex-direction: column
slots:
default:
- component: Label
config:
text: EG
- component: oh-button
config:
action: options
actionItem: =props.itemEG
actionOptions: 75=25%,50=50%,25=75%
fill: fill
text: SET
- component: f7-col
config:
style:
height: 100%
display: flex
flex-direction: column
justify-content: space-between
slots:
default:
- component: oh-link
config:
actionItem: =props.itemEG
actionCommand: UP
action: command
colorTheme: gray
iconF7: arrow_up_circle
iconSize: 25
- component: oh-link
config:
actionItem: =props.itemEG
actionCommand: STOP
action: command
iconF7: stop_circle
iconSize: 25
- component: oh-link
config:
actionItem: =props.itemEG
actionCommand: DOWN
action: command
colorTheme: gray
iconF7: arrow_down_circle
iconSize: 25
Wow, this was very quick and absolutly what i want. Thank you very much. I spent more then 2 hours to this without the solution.
Have a nice christmas.
