Change the width of a oh-list-card

  • Platform information:
    • Hardware: Pi4B 4GB
    • openHAB version: 3.0.1

I’d like to combine all rollershutters of a floor in a list card and not make separate rollershutter cards per item. However, the oh-list-card is too narrow. It look awful. How can I increase the width to have icon, title and the controls in one line?

Bildschirmfoto 2021-02-02 um 15.24.35

Hey @ItsaBastI

the oh-list-card itself uses 100% of the available width. The elements might overflow the card, depending on the location where you insert your card inside the OH page-grid.

You could use the Column Options inside your page settings to assign the widget a wider area depending for the different screen sizes.

I guess your suggestion only works for file-based configurations? I can’t find any column options in my page settings. :frowning:

I have to correct myself: I only searched in the “masonry” area so far. Now, when poking around the block area I also find column options… Not I need to figure out what the difference between masonry and block is and when to use them correctly.

I have exactly the same problem. I see that there is a oh-masonry component where the config parameter cols allow to adjust the number of cards to be presented on a particular screen width. Setting the parameter cols to desired values would solve my issue, but I did not figure out how this is connected to the oh-block component where my widgets are inserted. So I have:

masonry:
   - component: oh-masonry
     config:
       cols:
         default: 5
		 "1400": 4
         "1280": 3
		 "1023": 4
         "768": 3
		 "576": 2
         "480": 1
     slots:
	   default: 

And then I have:

component: oh-block
		 config: {}
		 slots:
		   default:
		     - component: oh-grid-row
		       config: {}
		       slots:
		         default:
		           - component: oh-grid-col
		             config:
		               xlarge: "33"
		               large: "50"
		               medium: "100"
		               small: "100"
		               xsmall: "100"
		               width: "100"
		             slots:
		               default:
                         <widget components go here>