Slider icon cut off if no label is set

[soenkekueper]

The problem

I've some new openhab 3 pages with some sliders that have no label, because they are self-explaing. For example: The receiver has an on/off switch and an volume slider below. When using the slider the tooltop showing the new value will be cut off at top by the next overlaying component.

Expected behavior

The tooltip with the new value should be overlaying the previous component.

Steps to reproduce

Configure an Layout-Page like this:

config:
  label: Testpage
  sidebar: true
blocks: []
masonry:
  - component: oh-masonry
    slots:
      default:
        - component: oh-list-card
          config: {}
          slots:
            default:
              - component: oh-label-item
                config:
                  action: options
                  actionItem: Receiver_InputSource
                  item: Receiver_InputSource
                  title: Eingang
                  icon: oh:soundvolume
              - component: oh-slider-item
                config:
                  scale: true
                  label: true
                  scaleSubSteps: 5
                  item: Receiver_Volume
                  icon: oh:SoundVolume
                  iconUseState: true

Than display the page and move the slider.

Your environment

runtimeInfo:
  version: 3.0.1
  buildString: Release Build
locale: de_DE
systemInfo:
  configFolder: /etc/openhab
  userdataFolder: /var/lib/openhab
  logFolder: /var/log/openhab
  javaVersion: 11.0.10
  javaVendor: Azul Systems, Inc.
  javaVendorVersion: Zulu11.45+27-CA
  osName: Linux
  osVersion: 5.10.17-v7l+
  osArchitecture: arm
  availableProcessors: 4
  freeMemory: 83633944
  totalMemory: 195035136
bindings:
  - ahawastecollection
  - astro
  - avmfritz
  - denonmarantz
  - exec
  - heos
  - linky
  - mqtt
  - netatmo
  - network
  - ntp
  - tankerkoenig
  - tradfri
clientInfo:
  device:
    ios: false
    android: false
    androidChrome: false
    desktop: true
    iphone: false
    ipod: false
    ipad: false
    edge: false
    ie: false
    firefox: false
    macos: false
    windows: true
    cordova: false
    phonegap: false
    electron: false
    nwjs: false
    webView: false
    webview: false
    standalone: false
    os: windows
    pixelRatio: 1.5
    prefersColorScheme: light
  isSecureContext: true
  locationbarVisible: true
  menubarVisible: true
  navigator:
    cookieEnabled: true
    deviceMemory: 8
    hardwareConcurrency: 8
    language: de-DE
    languages:
      - de-DE
      - de
      - en-US
      - en
    onLine: true
    platform: Win32
  screen:
    width: 2560
    height: 1440
    colorDepth: 24
  support:
    touch: false
    pointerEvents: true
    observer: true
    passiveListener: true
    gestures: false
    intersectionObserver: true
  themeOptions:
    dark: light
    filled: true
    pageTransitionAnimation: default
    bars: filled
    homeNavbar: default
    homeBackground: default
    expandableCardAnimation: default
  userAgent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML,
    like Gecko) Chrome/89.0.4389.128 Safari/537.36
timestamp: 2021-04-18T09:40:32.126Z

Browser console

No messages on console while moving the slider.

Browser network traffic

No failed requests, only an display issue.

Additional information

I've tested and produced this issue on

• Chrome Version 89.0.4389.128 (Offizieller Build) (64-Bit) on Windows 10
• Firefox 87.0 (64-Bit) on Windows 10
• Chrome 89.0.4389.105 on Android 11

[hubsif]

Hi @soenkekueper,

I just had a look at this and it works just fine if you enable the oh-list to be a media list:

        - component: oh-list-card
          config:
            mediaList: true

The oh-slider-item makes use of media list features that are only rendered properly if the containing list has media content enabled.

@ghys Actually, it seems oh-list-item (and its descendants) actually always use media. Wouldn't it maybe better to make media list be the default and make it "disableable" instead?

[soenkekueper]

Hey @hubsif , thanks for your reply. Yes, you'r right, this does not happen, when making this an "mediaList". But in my opinion this is looks ugly. The non media List is very more compact, so it's a lot of wasted space.

So i don't get whats the main difference between media and non media List :/

[ghys]

Media lists are more complex and allow multiple line items with subtitles etc. Wee the examples for instance here: https://v5.framework7.io/docs-demos/core/list-view.html?theme=ios

[ghys]

Actually, it seems oh-list-item (and its descendants) actually always use media. Wouldn't it maybe better to make media list be the default and make it "disableable" instead?

It could make sense but I'm I'm not so sure about that since it would deviate from the underlying f7 component, which could add to the confusion...