Map not centering correctly when in a horizontal-stack & grid

[yzaazy]

Checklist

• [X] I have updated to the latest available Home Assistant version.
• [X] I have cleared the cache of my browser.
• [X] I have tried a different browser to see if it is related to my browser.

Describe the issue you are experiencing

When you put a map in a horizontal stack/grid, it does not center correctly, and when you move the map the title disappears.

Describe the behavior you expected

The map should center like it does as a stand alone card or in a vertical-stack, and the title of the card should not disappear.

Steps to reproduce the issue

1. go to the demo on demo.home-assistant.io
2. add a horizontal-stack or grid card
3. add a map in the horizontal-stack or grid card and add an entity and a title to the map
4. try to center the map with the center button below the zoom buttons

What version of Home Assistant Core has the issue?

2022.11.1

What was the last working version of Home Assistant Core?

No response

In which browser are you experiencing the issue with?

107.0.5304.88

Which operating system are you using to run this browser?

Windows 11

State of relevant entities

No response

Problem-relevant frontend configuration

title: Home Assistant
views:
  - icon: hass:home-assistant
    id: home
    title: Home
    cards:
      - type: map
        entities:
          - entity: person.arsaboo
        title: Map as cards
      - type: horizontal-stack
        cards:
          - type: map
            entities:
              - entity: person.arsaboo
            title: Map in horizontal-stack
            dark_mode: false
      - type: vertical-stack
        cards:
          - type: map
            entities:
              - entity: person.arsaboo
            title: Map in vertical-stack
      - square: true
        columns: 1
        type: grid
        cards:
          - type: map
            entities:
              - entity: person.arsaboo
            title: Map in grid
  - theme: Backend-selected
    title: test
    path: test
    badges: []
    cards: []
  - theme: Backend-selected
    title: test
    path: test
    badges: []
    cards: []

Javascript errors shown in your browser console/inspector

No response

Additional information

No response

[ildar170975]

Confirmed. Win10, Chrome, 2022.11.1.

[anthonws]

+1 Noticed when updating to 2022.11. Grid-layout card. One more issue to map card (this and the other issues with card not showing on refresh is really going to push me to find an alternative...).

[ha-elguano]

Same situation here, also with a grid layout card, starting with 2022-11. Happens on all platforms I've tried (Chrome browser on iOS, Android, MacOS).

[chiefcomm]

Ditto, starting with 2022-11. Same issue all browsers Edge, Chrome, iOS and Android. Only when stacked or grid no issue when standalone :-)

[uuuuuuu7]

Temporarily fixed this with "card-mod 3". Didn't test thoroughly though..

card_mod:
  style: |
    ha-map{
    position: inherit !important;
    }

[chiefcomm]

I do not see any change with fixed as proposed by @uuuuuuu7 below configuration and map.

[XeRiZeR]

I use this code, seems to work.

[Florissilfhout]

I have two map cards in a grid and am experiencing the same issue.

What worked for me was playing with the aspect_ratio: aspect_ratio: '10:1' gave me the the best result. Nothing else in the configuration was necessary.

[karwosts]

This has something to do with how the map card is sized with padding_bottom.

I know that outside of a grid, the map card uses padding_bottom = 100% (of width) to size the card. So the width is set, and then the bottom of the card is padded out with 100% of the width (for 1:1 aspect ratio), and then the map renders inside of that space.

However inside a grid card, having a padding_bottom of 100% results in a map that is 2x the height of the width, presumably because the height and width are fixed by the grid, so the map thinks it is twice as tall as it really is, and the bottom half is truncated off by the grid cell. That's why the "center" of a 1:1 aspect ratio map puts the focus point right along the bottom edge.

I may poke at this a bit and see if I can think of a way to resolve it, but if any css expert want to look please do.

[karwosts]

I proposed something that could be a fix in PR #15290. Feedback welcome.