Why is f7-card-header overlapped by content, and why isn’t f7-card-footer positioned at the bottom?

[milo (M)]

Hello everyone,

I’m working on an OpenHAB widget using a f7-card with a header, content area, and footer. My expectation is that the header (blue area) appears at the top, the content (green area) in the middle, and the footer (yellow area) at the bottom of the card. However, I’m running into two issues:

1. The header is being overlapped by the content: The header should stay at the top, but it’s being covered by the content area.
2. The footer isn’t positioned at the bottom of the card: Despite using flex-direction: column and setting align-self: flex-end on the footer, it doesn’t sit at the bottom as expected and instead floats higher up in the card.

Here’s my YAML code:

uid: widget_4bd5188b6a
tags: []
props:
  parameterGroups: []
timestamp: Nov 13, 2024, 1:39:45 PM
component: f7-card
config:
  expandable: true
  style:
    display: flex
    flex-direction: column
    --f7-card-expandable-tablet-height: 75vh
    --f7-card-expandable-tablet-width: 35vw
    background-color: "=props.bgcolor ? props.bgcolor : ''"
    border-radius: var(--f7-card-expandable-border-radius)
    box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.1)
    height: 150px
    margin-left: 5px
    margin-right: 5px
    margin-top: 10px
    noShadow: false
    padding: 0px
  swipeToClose: true
slots:
  default:
    - component: f7-card-header
      config:
        style:
          width: 100%
          background: blue
      slots:
        default:
          - component: f7-block
            config:
              outline: true
              style:
                height: 200px
                background: blue
    - component: f7-card-content
      config:
        style:
          width: 100%
          background: green
      slots:
        default:
          - component: f7-block
            config:
              class:
                - card-prevent-open
                - card-content-padding
              outline: false
              style:
                height: 20px
                background: red
            slots:
              default:
                - component: f7-list
                  config: {}
                  slots: {}
    - component: f7-card-footer
      config:
        style:
          align-self: flex-end
          width: 100%
      slots:
        default:
          - component: f7-block
            config:
              outline: false
              style:
                height: 200px
                background: yellow
            slots:
              default:
                - component: f7-list
                  config: {}
                  slots: {}

My Questions:

• Why is the f7-card-header overlapped by the content, instead of staying at the top as expected?
• What changes should I make to ensure the f7-card-header is fixed at the top of the card?
• What changes should I make to ensure the f7-card-footer is fixed at the bottom of the card?

Thanks a lot in advance for any help or tips!

Without expandable: true

I see no issue, here is my yaml code

uid: f7-styled-card_example
tags: []
props:
  parameters: []
  parameterGroups: []
timestamp: Nov 13, 2024, 5:53:51 PM
component: f7-card
config: 
 
slots:
  default:
    - component: f7-card-header
      config:
        valign: bottom
        noBorder: true
        style:
          background-image: url(https://cdn.framework7.io/placeholder/nature-1000x600-3.jpg)
          background-size: cover
          background-position: center
          height: 100px
          --f7-card-header-text-color: rgba(255,255,255)
      slots:
        default:
          - component: Label
            config:
              text: Some generic headline
    - component: f7-card-content
      slots:
        default:
          - component: Label
            config:
              text: ='Posted on ' + dayjs().format('MMMM DD, YYYY')
              class:
                - padding-bottom
                - margin-bottom
              style:
                color: rgba(0,0,0,.5)
          - component: Label
            config:
              text: Bacon ipsum dolor amet pork loin tri-tip picanha, beef ribs venison
                alcatra filet mignon tongue kevin jerky pastrami. Bacon capicola
                tenderloin meatball ham fatback. Tri-tip salami boudin kielbasa
                bresaola. Pastrami shoulder cow chislic sirloin salami.
    - component: f7-card-footer
      slots:
        default:
          - component: f7-link
            config:
              style:
              text: I ❤ OpenHAB
          - component: f7-link
            config:
              text: Read more

[JustinG]

@milo

Why is the f7-card-header overlapped by the content, instead of staying at the top as expected?

The difference between your version and the sample you show is that your version has:

expandable: true

This actually changes a lot about the card. In an expandable card, the content container takes the entire card and that expands with the card when it is opened and continues to cover the whole visible area. That’s just how the expandable works. If you add expandable: true to the other sample you posted, you’ll see that it gets all messed up as well.

@milo

• What changes should I make to ensure the f7-card-header is fixed at the top of the card?
• What changes should I make to ensure the f7-card-footer is fixed at the bottom of the card?

If you change the z-index on your header to something like 4 or 5, you’ll probably see that it’s actually in the right place (the content is just drawn after the header and covers the whole card). So, one option is just to “slide” the content box down a little by giving it a top margin. The footer is also in the right place already, it’s just currently a very odd shape because of the size you’ve given it and the lack of content inside it.

Or you could just rearrange the order of the components. If you put the content before the header, then the header will render on top and you will see it. The downside to that, of course is that the top of you content area is covered by the header so you would have to account for that.

Styling expandable cards is just bit of a hassle. There’s no one right solution here; the structure I would use depends a lot on some of the fine details of how I want the various components to expand. For example, you could also just move the header and footer components inside the content component with the actual content you want between them. That will require adjusting the styles on the content component, of course, but gives you more control if the header and footer components are not a predictable height.