Picture Elements card: Positioning of popups

Configuration Frontend
1

Hi,

I am working on a new florplan dashboard using the picture elements card.

Is it possible to set the positioning of the popups?

Trying to make an energy page and have added the energy-date-selection card where i want it but when i click on the calendar button the popup does not go to an ideal position as you can see:

Calendar wrong position
Calendar wrong position1920×1080 93.9 KB

My card setup is a bit to complicated with over 3500 lines of code but here is a example of a card setup to get the same issue(Card is placed in a panel view):

type: picture-elements
image: https://upload.wikimedia.org/wikipedia/commons/8/89/HD_transparent_picture.png
style: |
  ha-card {
    background: none;
    margin: 0 auto;
  }
elements:
  - type: custom:hui-element
    card_type: energy-date-selection
    style:
      top: 73%
      left: 15%
      width: 25%
    card_mod:
      style: |
        ha-card {
          --primary-text-color: black;
          background: none;
          box-shadow: none;
        }
        h1.card-header {
          padding: 0px;
        }
        div#states.card-content {
          padding: 0px;
        }
        ha-card {
        --ha-card-background: #f7f7f773;
        --card-primary-color: black;
        --card-secondary-color: black;
        #--state-climate-heat-color: black;
        }
  - type: custom:hui-element
    card_type: energy-usage-graph
    style:
      top: 85%
      left: 15%
      width: 25%
    card_mod:
      style: |
        ha-card {
          --primary-text-color: black;
          background: none;
          box-shadow: none;
        }
        h1.card-header {
          padding: 0px;
        }
        div#states.card-content {
          padding: 0px;
        }
        ha-card {
        --ha-card-background: #f7f7f773;
        --card-primary-color: black;
        --card-secondary-color: black;
        #--state-climate-heat-color: black;
        }
1 Like
2

Aer you adjusting these settings for each element? It controls where the element is positioned.

style:
      top: 85%
      left: 15%
      width: 25%
3

Note that this is a wrong method to comment.
Should be

/* --state-climate-heat-color: black; */

since this part of card-mod code is a STRING.

4

Am adjusting it for each element yes for the positioning. But unsure on how to move the popup.

5

Thanks not sure why it was even there, must be from some copy paste :slight_smile: