Add Colorpicker "Popup" to Widget

[derhelge]

Hello,

i try to add a colorpicker to a light widget.
and i use oh-colorpicker-item but everytime i use this i get also an “on/off” Button and a white dot.
The colorpicker works but i dont want the power Button and the withe dot.

The “main” Code is not my creation. I copied it and change some things and add the “not good working” colorpicker

uid: Lamp_Card
tags: []
props:
  parameters:
    - description: Small title on top of the card
      label: Title
      name: title
      required: false
      type: TEXT
    - description: Header big sized
      label: Header
      name: header
      required: false
      type: TEXT
    - description: Icon on top of the card (only f7 icons (without f7:))
      label: Icon
      name: icon
      required: false
      type: TEXT
    - description: rgba or HEX
      label: Background Color
      name: bgcolor
      required: false
      type: TEXT
    - context: item
      description: Item to control on/off
      label: Item
      name: item_schalter
      required: false
      type: TEXT
    - context: item
      description: Item to control brightness
      label: Item
      name: item_brightness
      required: false
      type: TEXT
  parameterGroups: []
timestamp: May 12, 2021, 7:10:52 PM
component: f7-card
config:
  style:
    noShadow: false
    padding: 0px
    border-radius: var(--f7-card-expandable-border-radius)
    box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.1)
    background-color: "=props.bgcolor ? props.bgcolor : ''"
    height: 120px
    margin-left: 5px
    margin-right: 5px
slots:
  content:
    - component: f7-block
      config:
        style:
          position: absolute
          top: -5px
          left: 16px
          flex-direction: row
          display: flex
      slots:
        default:
          - component: f7-icon
            config:
              f7: =props.icon
              size: 18
              color: '=items[props.item_schalter].state == "ON" ? "blue" : "red"'
              style:
                margin-right: 10px
              visible: "=props.icon ? true : false"
          - component: Label
            config:
              text: "=props.title ? props.title : ''"
              style:
                font-size: 13px
                margin-top: 0px
    - component: f7-block
      config:
        style:
          position: absolute
          bottom: -15px
          left: 16px
          flex-direction: row
      slots:
        default:
          - component: Label
            config:
              text: "=props.header ? props.header : 'Set Props'"
              style:
                font-size: 20px
                font-weight: 600
                margin-left: 0px
                margin-top: 0px
    - component: oh-slider
      config:
        item: =props.item_brightness
        min: 0
        max: 100
        style:
          position: absolute
          bottom: -75px
          left: 20px
          width: calc(100% - 40px)
          --f7-range-bar-size: 4px
          --f7-range-bar-border-radius: 8px
          --f7-range-knob-size: 18px
          --f7-range-knob-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3)
          --f7-range-knob-color: "#1d88ed"
          --f7-range-bar-bg-color: "#505050"
          --f7-range-bar-active-bg-color: "#1d88ed"
    - component: oh-toggle
      config:
        item: =props.item_schalter
        style:
          position: absolute
          top: 15px
          right: 20px
          --f7-toggle-active-color: "#505050"
          --f7-toggle-handle-color: "#1d88ed"
    - component: oh-colorpicker-item
      config:
        item: =props.item_brightness
        style:
          position: absolute
          top: 28px
          right: 20px

[derhelge]

i tryed with

    - component: oh-colorpicker
      config:
        openIn: auto
        item: =props.item_brightness
        modules:
          - palette
        style:

i get the colorpicker but i cant “move” it

style:
          position: absolute
          top: -25px
          left: 16px

or anything else

[JustinG]

@derhelge

style:
          position: absolute
          top: 28px
          right: 20px

The oh-colorpicker is the better option than the oh-colorpicker-item. The -item widgets are intended to be one item within a list and so if they are used outside a list it results in many unintended formatting issues (although it’s not clear why that includes an extraneous toggle switch in this case).

Try putting the oh-colorpicker inside an f7-block and using the block to position it.

    - component: f7-block
      config:
        style:
          position: absolute
          top: 58px
          right: 20px
      slots:
        default:
          - component: oh-colorpicker
            config:
              openIn: auto
              item: =props.item_brightness
              modules:
                - palette

[derhelge]

Thank you very very much it looked for hours for a solution.
I am really bad a this but i still learning.