Help on responsive layout for Widget

Add-ons UIs
1

Hello Everyone,

I would appreciate some help on my widget design.

I’ve searched all this morning looking at different openhab widget, and on the forum, but don’t find a way to achieve what I want.

I’ve got the following very simple widget base on a f7-card.

uid: testLayout
tags: []
props:
  parameters: []
  parameterGroups: []
timestamp: Jan 19, 2024, 12:20:28 PM
component: f7-card
config:
  style:
    background-image: ='url(https://openhab.clae.net/static/bureaub.jpg)'
    background-position: center
    background-size: cover
    border-radius: var(--f7-card-expandable-border-radius)
    box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.1)
    height: 200px
    margin-left: 25px
    margin-right: 25px
slots:
  default:
    - component: f7-card-content
      config:
        style:
      slots:
        default:
          - component: Label
            config:
              text: test
              style:
                 color: white
                 font-size: 20pt

This is integrated in this page

config:
  label: Test Layout
  sidebar: true
blocks:
  - component: oh-block
    config: {}
    slots:
      default:
        - component: oh-grid-cells
          config: {}
          slots:
            default:
              - component: widget:testLayout
                config: {}
              - component: widget:testLayout
                config: {}
              - component: widget:testLayout
                config: {}
              - component: widget:testLayout
                config: {}
              - component: widget:testLayout
                config: {}
masonry: null
grid: []
canvas: []

By default, the result is great. Widget are displayed correctly.
When i downsizing the page width, the widget is shriking, and when there is no more place on the page for all widget, the widget in dispatch on 2 or more lines.

image
image2502×431 156 KB

image
image1433×332 83.5 KB

image
image800×589 104 KB

What I want is to give minimum width on the widget to display the image correctly.
But if I put a width or min-width on the f7-card, it just broke the responsive design.
Let’s say for exemple, I put someting like

uid: testLayout
tags: []
props:
  parameters: []
  parameterGroups: []
timestamp: Jan 19, 2024, 12:20:28 PM
component: f7-card
config:
  style:
    background-image: ='url(https://openhab.clae.net/static/bureaub.jpg)'
    background-position: center
    background-size: cover
    min-width: 500px

The different widget start overlapping like in the exemple bellow.

image
image2559×349 180 KB

Is someone know a good way to achieve correct result for this ?
It seems that there is the same problems with different stock openhab widget like the Widget Heating or Roomcard widget.

Thanks,
Laurent.

2

The issue is int he page layout you are using, not the style of the card widget.

This component is going to automatically calculate the number of columns in the row based on the fixed size of an oh-cell component, not on the size of whatever non-cell components you add.

To get the effect that you are looking for you want to add a grid row and grid column to the block, and then make the only child of the grid column an f7-row. Place all the widgets inside that row like this:

config:
  label: Test Layout
  sidebar: true
blocks:
  - component: oh-block
    config: {}
    slots:
      default:
        - component: oh-grid-row
          config: {}
          slots:
            default:
              - component: oh-grid-col
                config: {}
                slots:
                  default:
                    - component: f7-row
                      config: {}
                      slots:
                        default:
                          - component: widget:testLayout
                            config: {}
                          - component: widget:testLayout
                            config: {}
                          - component: widget:testLayout
                            config: {}
                          - component: widget:testLayout
                            config: {}
                          - component: widget:testLayout
                            config: {}
masonry: null
grid: []
canvas: []

The f7-row defaults to a flexbox display with a variable number of items per row based on the width of the children.

3

Hello Jason,

Thanks for your quick reply, I test it this morning, and it works perfect.

Do you know if there is a good documentation about base page component, and layout issues ?

I know about the page inside the official documentation like :
Building Pages - Components & Widgets | openHAB
Component Reference | openHAB

But it’s not easy to find from there the difference between every oh and f7 components.
If not, perhaps would be a good thing to have new entry into the documentation.

Best regards,
Laurent.

4

This would be a pretty monumental undertaking. In some cases is fairly easy because the OH components just add the OH specific actions to the f7 components. Others, however, have numerous limitations and complex constructions that are far beyond what any beginner needs to understand.

When you start to get into more advanced widget/page building, the best resource is the vue files for the components themselves.