Trying to understand icon_position

[jimbexleyspeed]

I'm trying to understand the behavior of icon_position, specifically for the overlay-icon spark. left appears to set the position "from the left edge", but right appears to set the position "to the left". I would have thought that right would mean "from the right edge", but my CSS understanding is basic at best. Is there a way to specify a "from the right edge" position?

[dcapslock]

It is from the right, but if the container it is overlaying, so check your for

Can you share an example if what yiu are trying to achieve?

[jimbexleyspeed]

I'm trying things like this:

type: custom:uix-forge
forge:
  mold: card
  sparks:
    - type: overlay-icon
      for: mushroom-template-card $
      icon: mdi:lightbulb
      icon_position:
        left: 0
        top: 0
element:
  type: custom:mushroom-template-card
  icon: mdi:leaf
  color: green
  primary: Test
  icon_tap_action: navigate

Using either left: 0 or right: 0, the icon is in the upper-left corner.

left: 10 works as I would expect, with larger values placing the icon further from the left.

right: 10 places the icon further to the left.

I was hoping that right: 0 would place the icon at the right edge, and larger values would move it to the left from there.

Would changing the for make this work? I've tried a few others, such as mushroom-template-card $ ha-card and mushroom-template-card $ ha-card div.container, but none seem to do the trick.

Thanks for your help.

[dcapslock]

OK. I have reviewed more and due to the way the overlay needs to be applied the overlay container needs inset: 0 so this means the positioning of the icon itself (ha-icon) is done releative to its size (24px by default) which is what you are seeing.

This is realy a bug in that right does not do what you would expect, but may not be able to be addressable too easily. I will review that further. It may be to implement the workaround below if right is an integer.

The workaround is to use left with a calc i.e. left: calc(100% - var(--uix-overlay-icon-size, 24px) - 2px. 24px being the default icon size, change if you change the icon size, 2px the effective right property which you wish.

type: custom:uix-forge
forge:
  mold: card
  sparks:
    - type: overlay-icon
      for: mushroom-template-card $
      icon: mdi:lightbulb
      icon_position:
        left: calc(100% - var(--uix-overlay-icon-size, 24px) - 2px
        top: 2px
element:
  type: custom:mushroom-template-card
  primary: Hello, {{user}}
  secondary: How are you?
  icon: mdi:mushroom

[dcapslock]

🎉 This issue has been resolved in version 8.0.1-beta.4 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

[jimbexleyspeed]

Great, I can do it that way. Thanks very much.

[dcapslock]

Note, now also fixed in beta so you can have right directly applied. It basically does the workaround as per update docs.

Pixel offsets for the icon inside the overlay. Accepts any combination of top, bottom and left, right. Numbers are treated as pixels; strings accept any CSS value. left takes precedence over right. top takes precedence over bottom. NOTE: Due to the overlay mechanism of the icon in the overlay container, right is set as left: calc(100% - var(--uix-overlay-icon-size, <icon_size>) - <icon_position.right>) and bottom is set as top: calc(100% - var(--uix-overlay-icon-size, <icon_size>) - <icon_position.bottom>)