[SOLVED][OH3] MainUI: Annoying line in widget

[sebasanblas (Seba)]

Hi.
Recently I was editing my “minimalist” player and I have noticed a line that I cannot eliminate, inspecting elements I find it difficult to identify where it comes from and how to eliminate it.

Any ideas?

uid: unireproductor_cell_v2
tags:
  - homekit-look
  - in use
timestamp: Apr 17, 2021, 10:16:54 AM
component: f7-card
config:
  expandable: false
  noShadow: false
  class:
    - card-expandable-animate-width
  style:
    border-radius: var(--f7-card-expandable-border-radius)
    box-shadow: var(--f7-card-expandable-box-shadow)
    background-color: rgba(228,228,228,0.9)
    height: 110px
    max-height: 300px
    min-height: 240px
    min-width: 110px
    max-width: 400px
    --f7-card-expandable-tablet-border-radius: 0px
    --f7-card-expandable-margin-horizontal: 0px
    --f7-card-expandable-margin-vertical: 0px
    --f7-card-bg-color: rgba(228,228,228,0.9)
    --f7-card-box-shadow: rgba(228,228,228,0.9)
    --webkit-user-select: none
    --moz-user-select: none
    --ms-user-select: none
    display: flex
    flex-direction: column
    justify-content: space-between
    padding-left: 0px
    padding-right: 30px
slots:
  default:
    - component: f7-card-content
      config:
        style:
          width: 90%
      slots:
        default:
          - component: f7-block
            config:
              class:
                - no-padding
              style:
                margin: 0px
                position: absolute
                left: 0px
            slots:
              default:
                - component: f7-row
                  config:
                    class:
                      - text-align-center
                      - display-flex
                      - justify-content-center
                    style:
                      padding-left: 0px
                      padding-right: 0px
                  slots:
                    default:
                      - component: Label
                        config:
                          text: Reproductor
                          style:
                            font-size: 14px
                            font-weight: 500
                            color: rgb(0,0,0,0.5)
                            justify-content: center
                          class:
                            - text-align-center
                - component: oh-player-card
                  config:
                    style:
                      width: 350px
                      height: 41px
                      background: transparent
                      margin-top: 9px
                      padding-left: 0px
                      padding-right: 0px
                    item: MusicPlayerDaemon_MediaControl
                - component: oh-slider-card
                  config:
                    noBorder: true
                    noShadow: true
                    min: 0
                    max: 100
                    step: 1
                    scale: true
                    outline: true
                    scaleSteps: 5
                    scaleSubSteps: 2
                    color: rgb(33,150,243)
                    style:
                      margin-top: -20px
                      --f7-range-knob-color: rgb(33,150,243)
                      --f7-range-size: 40px
                      --f7-badge-padding: 40px
                      --f7-badge-size: 8px
                      --f7-badge-bg-color: rgb(33,150,243)
                - component: f7-row
                  config:
                    style:
                      margin-left: 0px
                      margin-right: 0px
                      margin-top: -30px
                      margin-bottom: 0px
                    class:
                      - text-align-center
                      - display-flex
                      - justify-content-center
                  slots:
                    default:
                      - component: oh-label-card
                        config:
                          style:
                            margin-left: 0px
                            margin-right: 0px
                            margin-top: px
                            margin-bottom: 0px
                          icon: f7:music_note_list
                          iconSize: 30
                          action: options
                          actionItem: mpd_playlists
                          actionOptions: Lectura,DaftPunk,Otros
                          item: mpd_playlists
                          fontSize: small

Thanks!

[Oliver2 (Oliver)]

I cannot reproduce this. Your widget looks different on my device.

[sebasanblas (Seba)]

Mmm, It’s strange. I don’t know if that’s really any use but I use this layout:

config:
  label: test
  visibleTo:
    - role:administrator
  sidebar: true
blocks:
  - component: oh-block
    config: {}
    slots:
      default:
        - component: oh-grid-cells
          config: {}
          slots:
            default:
              - component: widget:unireproductor_cell_v2
                config: {}
masonry: null

[RGroll (Rainer)]

Try to avoid using cards inside other cards - theres a footer class inside of the oh-player-card which causes this.

You could do this for example:

component: oh-player-item
config:
  style:
    list-style-type: none

[sebasanblas (Seba)]

Thanks for the advice. I tried but there was no improvement.

[JustinG]

Try using the raw widget in this case. If you replace your oh-player-card with oh-player-controls you should get:

[RGroll (Rainer)]

@JustinG

Try using the raw widget in this case. If you replace your oh-player-card with oh-player-controls

This component is the even better choice.

[sebasanblas (Seba)]

Thanks @JustinG @RGroll ! After a few size changes, this I succeeded:

uid: unireproductor_cell_v2
tags:
  - homekit-look
  - in use
timestamp: Apr 20, 2021, 7:59:22 AM
component: f7-card
config:
  expandable: false
  noShadow: false
  class:
    - card-expandable-animate-width
  style:
    border-radius: var(--f7-card-expandable-border-radius)
    box-shadow: var(--f7-card-expandable-box-shadow)
    background-color: rgba(228,228,228,0.9)
    height: 250px
    width: 396px
    --f7-card-expandable-tablet-border-radius: 0px
    --f7-card-expandable-margin-horizontal: 0px
    --f7-card-expandable-margin-vertical: 0px
    --f7-card-bg-color: rgba(228,228,228,0.9)
    --f7-card-box-shadow: rgba(228,228,228,0.9)
    --webkit-user-select: none
    --moz-user-select: none
    --ms-user-select: none
    display: flex
    flex-direction: column
    justify-content: space-between
    padding-left: 0px
    padding-right: 0px
slots:
  default:
    - component: f7-card-content
      config:
        style:
          width: 100%
      slots:
        default:
          - component: f7-block
            config:
              class:
                - no-padding
              style:
                margin: 0px
                position: absolute
                left: 0px
                right: 0px
                width: 396px
            slots:
              default:
                - component: f7-row
                  config:
                    class:
                      - text-align-center
                      - display-flex
                      - justify-content-center
                    style:
                      padding-left: 0px
                      padding-right: 0px
                      width: 396px
                      height: 34px
                  slots:
                    default:
                      - component: Label
                        config:
                          text: Reproductor
                          style:
                            font-size: 14px
                            font-weight: 500
                            color: rgb(0,0,0,0.5)
                            justify-content: center
                          class:
                            - text-align-center
                - component: oh-player-controls
                  config:
                    style:
                      list-style-type: none
                      width: 396px
                      height: 41px
                      background: transparent
                      margin-top: 9px
                      padding-left: 0px
                      padding-right: 0px
                    item: MusicPlayerDaemon_MediaControl
                - component: f7-card
                  config:
                    style:
                      width: 396px
                      margin-left: 0px
                      margin-right: 0px
                  slots:
                    default:
                      - component: oh-slider-card
                        config:
                          noBorder: true
                          noShadow: true
                          min: 0
                          max: 100
                          step: 1
                          scale: true
                          outline: true
                          scaleSteps: 5
                          scaleSubSteps: 2
                          color: rgb(33,150,243)
                          style:
                            scale: 100%
                            margin-top: -15px
                            --f7-range-knob-color: rgb(33,150,243)
                            --f7-range-size: 40px
                            --f7-badge-padding: 0px
                            --f7-badge-size: 8px
                            --f7-badge-bg-color: rgb(33,150,243)
                - component: f7-row
                  config:
                    style:
                      margin-left: 0px
                      margin-right: 0px
                      margin-top: -20px
                      margin-bottom: 0px
                      width: 396px
                    class:
                      - text-align-center
                      - display-flex
                      - justify-content-center
                  slots:
                    default:
                      - component: oh-label-card
                        config:
                          style:
                            margin-left: 0px
                            margin-right: 0px
                            margin-top: px
                            margin-bottom: 0px
                          icon: f7:music_note_list
                          iconSize: 30
                          action: options
                          actionItem: mpd_playlists
                          actionOptions: Lectura,DaftPunk,Otros
                          item: mpd_playlists
                          fontSize: small