Explicitly set width and height of oh-label-card

Setup, Configuration and Use Beginners
1
  • Platform information:
    • Hardware: Raspberry Pi 4
    • OS: Raspberry Pi OS / x64 / 11 (bullseye)
    • Java Runtime Environment: 11.0.15 (Temurin-11.0.15+10) (running in Docker)
    • openHAB version: 3.4.4 (running in Docker)
    • ConBee 2 USB stick

Dear community,

How can explicitly set width and height of an oh-label-card element? I’m using several of this elements on my temperature dashboard which gets display on an eInk device (see here).
Since the screen size is very limited, I’d like to shrink the oh-label-card elements to fixed sizes.

Thank you

2

Th oh cards do not directly receive styling from the style setting the way most other components do. So, you have to set a css directive upstream of the card using the stylesheet property. If your cards are all on the same page and should be set to the same size, you may be able to add this to the page config, otherwise, you’ll have to put each card in it’s own container like this:

component: div
config:
  stylesheet: >
    .card {
      width: 50px;
      height: 50px;
    }
slots:
  default:
    - component: oh-label-card
      config:
...
1 Like
3

thx Justin! How can I place it on the page config?

4

When editing the page, switch to the code tab.

The top of the page yaml should be config, so just like in the widget example above, put the stylesheet setting in the config.

5

Hey @JustinG

I gave it a try today, but unfortunately, it looks pretty ugly :sweat_smile:

grafik
grafik835×509 7.56 KB

This is my config code:

config:
  layoutType: fixed
  fixedType: grid
  screenWidth: 800
  screenHeight: 480
  hideNavbar: true
  hideSidebarIcon: true
  colNum: 13
  label: Dashboard Waveshare fixed
  visibleTo:
    - role:administrator
    - role:user
blocks: []
masonry: null
grid:
  - component: oh-grid-item
    config:
      x: 1
      y: 2
      h: 2
      w: 3
    slots:
      default:
        - component: div
          config:
            stylesheet: |
              .card {
                width: 120px;
                height: 130px;
              }
          slots:
            default:
              - component: oh-label-card
                config:
                  footer: =dayjs(items['Multisensor1Temperature_LastUpdated'].state).format('HH:mm').replace("Invalid
                    Date", "--:--") + " | " +
                    (Number.parseFloat(items['Multisensor1Humidity_Humidity'].state)*100).toFixed(0)
                    + " %"
                  label: =Number.parseFloat(items["Multisensor1Temperature_Temperature"].state).toFixed(1)
                    + "°C"
                  title: Wohnzimmer
canvas: null

I see the following issues here:

  • Overflow of the footer (I’d expect it to be inside the black box resp. the middle part with the temperature should be smaller - there’s a lot of free space above and below the temperature close to the header and footer)
  • There are two boxes (probably one coming from the grid item and the other one from the label card)
6

Right, so far you’ve just changed the height of the card. That doesn’t necessarily mean that the contents are going to change accordingly. You are going to have to decide how you also want to shrink the content to make it fit.

If you use your browsers inspect function it will show you each element and the css for it including sizes and margins and padding. You noted the extra space around the temperature label. Well, the inspect function tells you that’s because the label, which is in a div with a class of item-content, has 16px padding all around it. If you wish to remove some of that extra space to shrink the card contents then you would also add this to the stylesheet:

.item-content {
  padding: 8px;
}

Correct. I don’t use the grid layout so I don’t know how much control there is for this, but you will want to manually resize that grid box as well. I assume that is the x, y, h, w in the grid config, but how you define the size of those columns and rows, I don’t know. It’s also possible that the card will resize to the grid box if you don’t set its size explicitly. In that case you can remove the .card style directives and just adjust the various components inside the card such as the content padding above until all the content fits in the card that is sized to the grid element. Other things you can inspect with the browser and change the same way would be the text size, maybe the line height on the footer and the header.

Lastly: right now because you added the whole div + stylesheet to the grid item, the css you are adding will only effect that one card. If you want this to extend to all the cards you place on the page, then you will have to move it to the overall page config as suggested above.