Oh-cell - alight header or title text to the right

1

Hi,

How do i align the header text to the right instead of on the left? i tried the following and it doesn’t seem to work. I want the “test” text on the right instead. Thank you



          - component: oh-cell
            config:
              stylesheet: |
                div:has(.back-image){
                  height: 100%;
                }
                div:has(.align-right) {
                  justify-content: end;
                }
            slots:
              background:
                - component: div
                  config:
                    style:
                      background-image: url('/static/images/KK.jpg')
                      background-size: cover
                      height: 100%
                      width: 100%
                    class:
                      - back-image
                      - card-opened-fade-out
              header:
                - component: Label
                  config:
                    style:
                      textalign: right
                    text: test
                    class:
                      - align-right

image
image325×139 57.8 KB

2

The oh-cell component is intended to be a very low code option with simple configurations parameters and lots of baked in style. This makes it a pain to customize and often requires special work to overwrite the existing cell styles (as you’ve already discovered). However, the cell is really just a special case of the oh-card which is made to be very customizable). At some point you may find it easier to build whatever you are going for with a card as the base instead of a cell.

There’s simple no good answer here. And, although there are a few things you can do to move the text around, none of them will be very robust. The problem is that width of the cell is not actually what you see. The actual width of the cell is set by the F7 library’s underlying code depending on screen size and that value is the width of the contents view that the cell expands into when clicked. So it doesn’t matter if the collapsed cell that you see is 50 pixels wide or 300 pixels wide the container that holds the text of your header is probably 670 pixels wide. This means that you can’t use any easy css, such as setting the width of the label to be the width of the card and then right-justifying the text.

Here’s one example. If you know that your visible cell is always going to be the same fixed width, then you can set the label to a fixed width and justify the text:

- component: Label
  config:
    style:
      text-align: right <--note the '-' in text-align
      width: 250px
    text:  test

You don’t even need the extra class and stylesheet stuff in that case. But that will not scale as the cell changes width.

3

Not sure if this of help, but I right align text using the background slot. Can’t remember why - it might work inside the default slot as well.

  background:
    - component: f7-block
      config:
        style:
          display: flex
          height: 120px
          justify-content: flex-end
          margin: 0
          padding-top: 40px
          width: 100%
      slots:
        default:
          - component: Label
            config:
              style:
                font-size: 40px
                font-weight: 600
                text-align: right
              text: Whatever
1 Like
4

Yeah, that works better because the background slot doesn’t have the same width issue the other slots have. It’s width is set by the visible card, not by the theoretical expanded contents size. That means that width: 100% in the block creates a container of the correct width to justify the label. That will not work for the header.

1 Like
5

Great guys .. this is helpful