Center text in OH list-card / list-items

[arjan-io (Arjan)]

Hi,

Is it possible to align icon/text in an OH list-card and/or list item?
Partial code:

blocks:
  - component: oh-block
    config: {}
    slots:
      default:
        - component: oh-grid-row
          config: {}
          slots:
            default:
              - component: oh-grid-col
                config: {}
                slots:
                  default:
                    - component: oh-list-card
                      config:
                        title: "!!! ROOK / BRAND GESIGNALEERD !!!"
                        style:
                          text-align: center //<- this doen not work
                      slots:
                        default:
                          - component: oh-list-item
                            config:
                              action: command
                              actionCommand: OFF
                              actionItem: gSmokeAlamr
                              icon: openhab:fire-off
                              label: Clear
                              no-chevron: true
                              title: Rookalarm uitzetten
                              style:
                                backgroundColor: green

The idea:

Thanks in advance!

[JustinG]

The problem is that, although in the oh widget yaml a list card looks like it is one piece, it is actually many different html elements. Here’s what the html of a bare-bones card looks like:

<div class="card">
  <div class="card-header">
    <div>Basic List Card</div>
  </div>
  <div class="card-content card-content-padding">
    <div class="list" content="-">
      <ul>
        <li class="">
          <div class="item-content">
            <div class="item-inner">
              <div class="item-title">label item</div>
              <div class="item-after">
                <div></div>
              </div>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</div>

So when you apply a setting via the card’s style property, OH simply cannot know which of those elements should get the style setting. In some widgets, the definition of the widget simply chooses one element to apply the style to (usually the top element), but in this case the style property is simply ignored.

In order to add custom styling to the card you will have to use the stylesheet property instead to directly inject css into the html of the widget.

For example, centering the title is accomplished with:

component: oh-list-card
config:
  title: Basic List Card
  stylesheet: >
    .card-header {
      justify-content: center;
    }
slots:
  default:
    - component: oh-label-item
      config:
        title: label item

For the list item, you’ll probably have to adjust the flex spacing of the item-content div the same way but also the width of the item-inner div.

[arjan-io (Arjan)]

The header is indeed centered. Now comes the task of the list item itself. It is indeed a struggle with css and divs…

If anyone has a working example

[JustinG]

@JustinG

you’ll probably have to adjust the flex spacing of the item-content div the same way

This just means that you can change the first css directive to select any item with the card-header class or the item-content class:

    .card-header, .item-content {
      justify-content: center;
    }

@JustinG

also the width of the item-inner div

What I mean here is that the width of the item-inner class div is set to 100% so even if you try and center the content it will stretch to fill the whole space and it will not look like it’s being centered. You have to override the 100% width with a directive to autofit the width to the contents. That means adding the following to the stylesheet property as well:

    .item-inner {
      width: auto;
    }

[arjan-io (Arjan)]

@JustinG

.item-inner {
      width: auto;
    }

I was going down the wrong route and tried with the ul and li selectors. Also didn’t know there was the need of a comma between .card-header and .item-content.

Thanks for helping out, much appreciated!

[ysc (Yannick Schaus)]

If you want a CSS-free solution you can customize a generic f7-card like so:

component: f7-card
config:
  style: {}
  class: []
slots:
  default:
    - component: f7-card-header
      config:
        style: {}
        class:
          - justify-content-center
      slots:
        default:
          - component: oh-button
            config:
              text: Header
    - component: f7-card-content
      config:
        style: {}
        class: []
      slots:
        default:
          - component: oh-button
            config:
              text: Content
    - component: f7-card-footer
      config:
        style: {}
        class: []
      slots:
        default:
          - component: oh-button
            config:
              text: Button 1
          - component: oh-button
            config:
              text: Button 2
          - component: oh-button
            config:
              text: Button 3

You need to put components like f7-card-header, f7-card-content and f7-card-footer directly under (you can remove what you don’t need as well as empty style or class properties in the above code), and then put the components you need directly under those. This allows you to customize the styles and applied classes at all levels. Note that headers and footers have justify-content: space-between by default so you can add multiple components and they will spread out nicely (as shown with the 3 buttons in the footer above).

FYI- There was an idea floated to have a oh-card component which the other cards would simply be based on, and which would allow you to customize headers and footers and possibly even the content by having separate slots (instead of having everything under default). There would be separate properties for header/content/footer classes and style.
This is not implemented as of now.