"restriction-lock-row-margin-top" not applied anymore since v1.2.1x

[bcutter]

Checklist:

• I updated to the latest version available
• I cleared the cache of my browser

Release with the issue: 1.2.14

Last working release (if known): 1.2.9 (?)

Browser and Operating System: All browsers on all devices

Description of problem:
The --restriction-lock-row-margin-top is not applied anymore. All other do.

Example:

type: custom:state-switch
entity: input_boolean.gui_global_details
default: ''
transition: none
states:
  'on':
    type: entities
    title: 🤖 Automatisierungen & Skripte
    state_color: true
    show_header_toggle: false
    entities:
      - type: custom:text-divider-row
        text: Automatisierungen
        align: center
        card_mod:
          style: |
            :host {
              #--text-divider-color: red;
              --text-divider-font-size: 16px;
              #--text-divider-line-size: 3px;
              #--text-divider-margin: 1em 0;
              margin-bottom: -29px;
            }
      - type: custom:fold-entity-row
        head:
          type: section
          label: ✅ Läuft aktuell
          card_mod:
            style: |
              .divider {
                background-color: transparent !important;
                #margin-top: -15px !important;
              }
        padding: 0
        open: true
        group_config:
          state_color: true
        entities:
          - type: custom:restriction-card
            row: true
            restrictions:
              confirm: null
              pin:
                code: 9999
                text: 'Gesperrter Bereich. PIN nötig:'
                retry_delay: 0
                max_retries: unlimited
                max_retries_delay: 0
                exemptions:
                  - user: xxx
              block: null
            exemptions: null
            card_mod:
              style: |
                :host {
                  --restriction-lock-icon-size: 20px;
                  --restriction-regular-lock-color: var(--accent-color);
                  --restriction-success-lock-color: green;
                  --restriction-lock-row-margin-left: 130px;
                  --restriction-lock-row-margin-top: -32px;
                  #--restriction-lock-margin-left: 10px;
                }
            card:
              type: custom:auto-entities
              card:
                type: entities
                title: ''
                state_color: false
                show_header_toggle: false
                card_mod:
                  style:
                    .: |
                      ha-card {
                        margin-left: -15px;
                        margin-right: -15px;
                        margin-top: -16px;
                        margin-bottom: -30px;
                        border-width: 0px;
                      }
              entities: []
              filter:
                include:
                  - domain: automation
                    attributes:
                      current: '> 0'
                    options:
                      secondary_info: last-triggered
                exclude: []
              show_empty: false
              unique: false
              sort:
                method: last_triggered
                reverse: true
                count: 5

restriction-lock-row-margin-left is working, so does restriction-lock-icon-size etc. It's just the margin-top which is completely not respected anymore.

Javascript errors shown in the web inspector (if applicable):

Additional information:
Not sure which version exactly introduced this. Maybe the first one of this year (1.2.10), maybe a later release.

[ildar170975]

There are FOUR other custom plugins in your MINIMAL code.
Suggest to simplify to an absolute minimum.

[bcutter]

It is as it is. Worked before an update, broken after an update. In exactly that constellation.

Well I'll have a look.

[ildar170975]

Code which is not stripped from unrelated stuff & other custom plugins will not be considered.

[bcutter]

          - type: custom:restriction-card
            row: true
            restrictions:
              confirm: null
              pin:
                code: 9999
                text: 'Gesperrter Bereich. PIN nötig:'
                retry_delay: 0
                max_retries: unlimited
                max_retries_delay: 0
                exemptions:
                  - user: xxx
              block: null
            exemptions: null
            card_mod:
              style: |
                :host {
                  --restriction-lock-icon-size: 20px;
                  --restriction-regular-lock-color: var(--accent-color);
                  --restriction-success-lock-color: green;
                  --restriction-lock-row-margin-left: 130px;
                  --restriction-lock-row-margin-top: -32px;
                  #--restriction-lock-margin-left: 10px;
                }
            card:
              type: custom:auto-entities
              card:
                type: entities
                ...

[bcutter]

V1.2.15 seems to have fixed it.

But I need to confirm this on a desktop browser.

In the HA Companion app the orange lock is not shown initially, only when unlocking the (green) lock is visible - but at the correct place at least.

[ildar170975]

The code you posted earlier is wrong.
You should not use "row: true" for a card.
So, a behaviour may differ from an expectation.

[bcutter]

If row is true one is (was) able to theme it with "restriction-lock-row-margin-top". Unfortunately now the lock is not shown at all anymore.

With row = false now: Why don't we have a "restriction-lock-margin-top"? It's not in the docs and it is obviously not working. That would solve the problem.

[ildar170975]

Unfortunately now the lock is not shown at all anymore.

Because it comes OUTSIDE the #overflow since you set it negative.
It is rather tempting to allow the icon to be located outside this area - but in this case the "unlock area" will be spread up/down. I.e. it may go to different elements.
That is why I set overflow: clip.

[ildar170975]

Why don't we have a "restriction-lock-margin-top"? It's not in the docs and it is obviously not working. That would solve the problem.

This could be a FR. I will think about that.
Really, if we can vertically locate an icon for a row - then why it is not allowed for a card?

[ildar170975]

@bcutter
I am closing the issue since it works for ROWS.
A support for margin-top for CARDS will be implemented one day.

[bcutter]

Well without the ability to set margin-top for the card, only 50 % of the way is gone.

I have no idea what overflow is. If I set a positive value or 0px, it still does not show up.

[ildar170975]

As I already told you - you should not use "row: true" for a CARD.

[bcutter]

As I told you (now for the 3rd time), I set row to false already. And now I can not control the position of the lock anymore.

So
A) either I use row true and I don't see the orange lock until tapping the card (then it appears, animates, is green, and hides again) or
B) I use row false and I can see the lock icon but can not position it correctly.

Is this description understandable?

[ildar170975]

1. Obviously for CARD you should not use "row: true".
2. Obviously for card you cannot position a lock vertically. Setting margin-top for a lock would be a new functionality.

Locking this thread since we are moving in circles.