Items in list on page do not show values anymore in OH 5.1

Setup, Configuration and Use Migration
1

I migrated from OH 4.3.8 to 5.0 and a few days later to 5.1.

I have a simple page with a simple list of items. After the upgrade, it does not show the item values anymore. I have no clue why.

The page has some stylesheet tricks, so it would display perfectly on my Android tablet, but even when I disable them, I still see no values.

Any help/hints would be greatly appreciated. Thanks!

image
image1520×1160 68.8 KB

yaml:

config:
  colNum: 6
  fixedType: grid
  label: R5 Page
  layoutType: fixed
  scale: false
  screenHeight: 650
  screenWidth: 700
  stylesheet: |
    .list {
    }
    .card-content {
      background-color: rgb(28, 28, 29);
    }
    .oh-grid-item-content {
      /*height: 500px;*/
      overflow: visible !important;
    }
blocks: []
masonry: []
grid:
  - component: oh-grid-item
    config:
      h: 1
      w: 6
      x: 0
      y: 0
    slots:
      default:
        - component: oh-image-card
          config:
            item: Renault_5_ETech_Image_URL
  - component: oh-grid-item
    config:
      h: 4
      w: 6
      x: 0
      y: 1
    slots:
      default:
        - component: oh-list-card
          config:
            mediaList: false
            noBorder: true
            noShadow: true
            simpleList: true
          slots:
            default:
              - component: oh-label-item
                config:
                  item: Renault_5_ETech_Batterieladung
                  title: Akku
              - component: oh-label-item
                config:
                  item: Renault_5_ETech_Estimated_Range
                  title: Reichweite
              - component: oh-label-item
                config:
                  item: Renault_5_ETech_Charging_Status
                  title: Ladestatus
              - component: oh-label-item
                config:
                  item: goe_Power_All
                  title: Ladung mit
              - component: oh-label-item
                config:
                  item: goe_Current_Session_Charged_Energy
                  title: Geladen
              - component: oh-label-item
                config:
                  item: Renault_5_ETech_Charging_Time_Remaining
                  title: Ladezeit verbleibend
              - component: oh-label-item
                config:
                  item: Renault_5_ETech_Odometer
                  title: Kilometerstand
              - component: oh-label-item
                config:
                  actionModal: page:page_595eaf3b67
                  item: R5_Address
                  title: Adresse
              - component: oh-label-item
                config:
                  item: Renault_5_ETech_Battery_Status_Updated
                  title: Akku aktualisiert
              - component: oh-label-item
                config:
                  item: Renault_5_ETech_Location_Updated
                  title: Adresse aktualisiert
canvas: []

Edit:

Created a new dedicated list test page. There, the item label and value are visible in design mode, but nothing at all in run mode.

config:
  label: List Test Page
  layoutType: fixed
  fixedType: grid
blocks: []
masonry: []
grid:
  - component: oh-grid-item
    config:
      x: 0
      y: 0
      h: 6
      w: 9
    slots:
      default:
        - component: oh-list-card
          config: {}
          slots:
            default:
              - component: oh-label-item
                config:
                  item: Renault_5_ETech_Batterieladung
                  title: Battery
canvas: []
Oh-list-item no longer displays items state
2

A wild thought, but could it be something as simple as using the same text color as the background?

3

Good idea. I inspected the HTML of the Test Page and the item is there with label and value, it just is not visible on the page.

If it is because of color, this should of course not happen on a simple test page with default settings, I think.

4

Correct me if I am wrong, but did you not say that the test page does work, but the run-time page not? That should help discern if it is a color issue versus (say) a zero font size, or (say) a zero display column width, or (say) a zero row height..

5

I believe this is related to the F7 update. Simple lists no longer include after slots in the list items. Just remove the simpleList and mediaList properties from the list card and you should be good.

This is a zero height issue. If you add

style:
  height: 200px

to the list item in the code tab and then activate the run mode you will see the list items appear. Even though this is not related to your original problem this one is worth creating an issue in the UI repository.

1 Like
6

Thanks a lot! It is working again.

For my original page, I removed:

mediaList: false
simpleList: true

and it looks right again in Run Mode. However, in design mode, each item is more shifted to the right (leaving out location data here):

image
image762×335 19.5 KB

For the test page, adding a height to the list item makes the label and value visible again in Run Mode. Seems, like this is only necessary for the last item, if I have multiple.

However, adding that height to the last item is not necessary for my real page.

The shifting to the right in design mode also happens on the test page:

image
image760×237 10.4 KB