[OH3] Pages - masonry width

Hi and Merry Christmas,
first of all a big Thank You to all of the devs for the new OH3 release. :+1: :+1: :+1:
I installed the new OH3 stable some days ago and still figuring out the new concept of pages.

As I understand there is the possibility to either use a row / column design or a so called masonry design. The latter is responsive whereas the row column design is not. So if I want to design a page which can be used with a smartphone and a pc/tablet at the same time I would go with masonry design right?
However if I do that the cards (is that the correct terminology?) in my masonry design are a bit too small for the pc so I lose some Text. Is it possible to set the minimum width of a card, or for all cards within a page?

Br, Marc

Refer this

1 Like

Thanks that works great.

You also have a hidden “cols” property of oh-masonry that you can configure in YAML which is forwarded to the masonry library, defining how many columns you have at certain width breakpoints: GitHub - paulcollett/vue-masonry-css: Vue.js Masonry layout component powered by CSS, dependancy free

By default it is defined like thus: openhab-webui/oh-masonry.vue at a06a3371e87bf9cac5c38419669354a190e4a6fc · openhab/openhab-webui · GitHub

{default: 5, 1400: 4, 1280: 3, 1023: 4, 768: 3, 576: 2, 480: 1}

I also think it’s a little too narrow, it might be adjusted in the future.

3 Likes

This topic was automatically closed 41 days after the last reply. New replies are no longer allowed.