OH3 Accordion List Layout - justify left

Setup, Configuration and Use Beginners
, ,
1

Hi All

I am trying to use an accordion list to display a list of items - however I also need to be able to set the font sizes, color and the justification.

I have managed to get most of the layout working - however the first line of the list is still right justified and no matter what I try I cannot get it right:

Accrdion Layout
My YAML is:

component: oh-list-card
config:
  title: Test Layout
  accordionList: true
slots:
  default:
    - component: oh-list-item
      slots:
        after:
          - component: Label
            config:
              text: Line 1
              style:
                color: red
                font-size: 13px
              class:
                - display-flex
                - justify-content-left
                - align-items-left
        accordion:
          - component: oh-list
            config:
              style:
                color: black
            slots:
              default:
                - component: oh-list-item
                  config:
                    class:
                      - display-flex
                      - justify-content-left
                      - align-items-left
                  slots:
                    after:
                      - component: Label
                        config:
                          text: Line 2
                          style:
                            color: red
                            font-size: 13px
                - component: oh-list-item
                  config:
                    class:
                      - display-flex
                      - justify-content-left
                      - align-items-left
                  slots:
                    after:
                      - component: Label
                        config:
                          text: Line 3
                          style:
                            color: red
                            font-size: 13px

My only other option seems to be to use the First List Item as a Label/Title, but then the Card doe snto look like the others on the page…

EDIT:
My other attempt - which seems to affect all the later components

component: oh-list-card
config:
  title: Test Layout
  accordionList: true
slots:
  default:
    - component: oh-list-item
      config:
        class:
          - display-flex
          - justify-content-left
          - align-items-left
      slots:
        after:
          - component: Label
            config:
              text: Line 1
              style:
                color: red
                font-size: 13px
        accordion:
          - component: oh-list
            config:
              style:
                color: black
            slots:
              default:
                - component: oh-list-item
                  config:
                    class:
                      - display-flex
                      - justify-content-left
                      - align-items-left
                  slots:
                    after:
                      - component: Label
                        config:
                          text: Line 2
                          style:
                            color: red
                            font-size: 13px
                - component: oh-list-item
                  config:
                    class:
                      - display-flex
                      - justify-content-left
                      - align-items-left
                  slots:
                    after:
                      - component: Label
                        config:
                          text: Line 3
                          style:
                            color: red
                            font-size: 13px

Accrdion Layout

EDIT:
The result seems to be affected by the length on the text in line 2 ??? All I did was add abcdefgh to line 2:
Accrdion Layout-lenght

Any suggestions

Thanks
Mark

2

The issue is the Label in the after slot. Once the accordion chevron is added, I believe the after slot is anchored to the right side of the item. You can control the formatting of the list item’s title so I don’t see a reason for the extra label at all.

component: oh-list-card
config:
  title: Test Layout
  accordionList: true
slots:
  default:
    - component: oh-list-item
      config:
        title: Line 1
        style:
          color: red
          font-size: 13px
      slots:
        accordion:
          - component: oh-list
            config:
              style:
                color: black
            slots:
              default:
                - component: oh-list-item
                  config:
                    title: Line 2
                    style:
                      color: red
                      font-size: 13px
                - component: oh-list-item
                  config:
                    title: Line 3
                    style:
                      color: red
                      font-size: 13px

image
image812×144 3.09 KB

If you had more in mind and really think that the label is a necessary step, then you will have to move from the oh-list-item to the f7-list-item because you will have access to all the different slots and not just the after slot. The downside there is that the accordion setup for the f7 widgets is slightly more involved.

1 Like
3

Thanks Justin. As usual you have the solution:

Justin

I was battling to be able to control the font size and color etc… And worked off a previous example. But simpler is better.

4

Hi Justin

Looks like I do need this? I want to be able to set the background etc as well?

I have the whole list inside an f7-list - not sure if that is a problem?

So what I have is:

    - component: f7-list
      config:
        style:
          position: absolute
          left: 20%
          top: 55%
          width: 60%
          --f7-list-border-color: transparent
          opacity: 80%
        class:
          - padding-bottom
          - big-toggles
      slots:
        default:
          - component: oh-list-card
            config:
              title: Alarm Logs
              accordionList: true
              style:
                padding-left: 20px
                font-weight: 500
                line-height: 20px
                backgroundColor: rgb(191, 189, 189)
                font-size: 75%
                --f7-list-border-color: transparent
            slots:
              default:
                - component: oh-list-item
                  config:
                    title: =items.Panel_LogMessage10.state
                    style:
                      color: red
                      font-size: 10px
                  slots:
                    accordion:
                      - component: oh-list
                        config:
                          style:
                            color: black
                        slots:
                          default:
                            - component: oh-list-item
                              config:
                                title: =items.Panel_LogMessage9.state
                                style:
                                  color: red
                                  font-size: 10px
                            - component: oh-list-item
                              config:
                                title: =items.Panel_LogMessage8.state
                                style:
                                  color: red
                                  font-size: 10px
                            - component: oh-list-item
                              config:
                                title: =items.Panel_LogMessage7.state
                                style:
                                  color: red
                                  font-size: 10px

Which gives me:
List

I would like the background etc. all to be the same - similar to this list:

list 2

Which you also helped me with.
BYPASS-YAML.txt (1.5 KB)

Cheers
Mark

5

So I have made some progress:

List 1

But I can’t get the first line of the accordion list to match the rest? I have put the components in an f7-list to match the other lists I use in my main widget and to be able to control the background, etc.

I can see there is something to do with the slots:, but no idea how to fix.

component: f7-list
config:
  noChevron: true
slots:
  default:
    - component: Label
      config:
        text: Alarm Logs
        style:
          padding-left: 20px
          font-weight: 500
          line-height: 20px
          backgroundColor: rgb(191, 189, 189)
          font-size: 75%  
    - component: f7-list-item
      config:
        accordionItem: true
      slots:
        content:
          - component: oh-list-item
            config:
              title: =items.Panel_LogMessage10.state
              style:
                font-size: 10px
                color: red
                backgroundColor: rgb(235, 232, 232)
                --f7-list-item-border-color: transparent
        default:
          - component: f7-accordion-content
            slots:
              default:
                - component: f7-list-item
                  config:
                    title: =items.Panel_LogMessage9.state
                    style:
                      font-size: 10px 
                      color: red
                      backgroundColor: rgb(235, 232, 232)
                      --f7-list-item-border-color: transparent
                - component: f7-list-item
                  config:
                    title: =items.Panel_LogMessage8.state
                    style:
                      font-size: 10px 
                      color: red
                      backgroundColor: rgb(235, 232, 232)
                      --f7-list-item-border-color: transparent
6

The problem is you don’t need the extra oh-list-item here. The white rectangle is the f7-list-item to which you have applied no formatting and then within that is the oh-list-item formatted the way you want. Get rid of the oh-list-item altogether and move all of that text and formatting up to that first f7 item.

component: f7-list
config:
  noChevron: true
slots:
  default:
    - component: Label
      config:
        text: Alarm Logs
        style:
          padding-left: 20px
          font-weight: 500
          line-height: 20px
          backgroundColor: rgb(191, 189, 189)
          font-size: 75%  
    - component: f7-list-item
      config:
        accordionItem: true
        title: =items.Panel_LogMessage10.state
        style:
          font-size: 10px
          color: red
          backgroundColor: rgb(235, 232, 232)
          --f7-list-item-border-color: transparent
      slots:
        default:
          - component: f7-accordion-content
            slots:
              default:
                - component: f7-list-item
                  config:
                    title: =items.Panel_LogMessage9.state
                    style:
                      font-size: 10px 
                      color: red
                      backgroundColor: rgb(235, 232, 232)
                      --f7-list-item-border-color: transparent
                - component: f7-list-item
                  config:
                    title: =items.Panel_LogMessage8.state
                    style:
                      font-size: 10px 
                      color: red
                      backgroundColor: rgb(235, 232, 232)
                      --f7-list-item-border-color: transparent
7

Once again - THANK YOU.

And thanks for explaining. Makes perfect sense once you know…