Element visually "steps" onto other elements (see pic)

chezpaul commented 4 months ago

Is there an existing issue for this?

[X] I have searched the existing issues

Current Behavior

My Atomic calendar is always mixed up into other elements. If I put calendar in a vertical stack, it keeps stacking up on top of other elements. and I have moved it around in my sidebar. Wherever I put it, it will always show on top of some other element.

Expected behaviour

Atomic clendar should have it's own space.

Steps To Reproduce

This is my config.yaml part with Atomic Sender: ` #################################################

  #                    SIDEBAR                    #
  #                                               #
  #################################################

  - type: custom:vertical-stack-in-card
    view_layout:
      grid-area: sidebar
    card_mod:
      style: |
        ha-card {
          border: none;
        }
    cards:
      - type: custom:button-card
        entity: sensor.template_ptime
        template:
          - ptime

      # Added Weather-forcast Card
      - type: weather-forecast
        style: |
          ha-card {
            background: transparent !important;
            color: #fff !important;
            overflow: hidden !important;
            box-shadow: none !important;
            border: none !important;
          }
        entity: weather.openweathermap
        show_current: true
        show_forecast: false
        secondary_info_attribute: precipitation
        name: Culver City
        tap_action: !include popup/weather.yaml
        card_mod:
          style: |
            ha-card {
              border: none;
            }

      - type: custom:hourly-weather
        entity: weather.pirateweather
        num_segments: 12 # optional, defaults to 12
        name: null # optional, defaults to "Hourly Weather"
        icons: true
        card_mod:
          style: |
            ha-card {
              border: none;
            }

      # Clock-Weather-Card
      - type: custom:clock-weather-card
        style: |
          ha-card {
            background: transparent !important;
            color: #fff !important;
            overflow: hidden !important;
            box-shadow: none !important;
            border: none !important;
          }
        entity: weather.openweathermap
        tap_action: !include popup/weather2.yaml
        sun_entity: sun.sun
        weather_icon_type: line
        animated_icon: true
        forecast_rows: 5
        locale: en-GB
        time_pattern: HH:mm
        time_format: 24
        date_pattern: ccc, d.MM.yy
        hide_today_section: true
        hide_forecast_section: false
        hide_clock: true
        hide_date: true
        hourly_forecast: false
        use_browser_time: true
        time_zone: null
        card_mod:
          style: |
            ha-card {
              border: none;
            }

      # Air Quality Button
      - type: custom:button-card
        entity: sensor.air_quality_combo
        style:
          left: auto
          right: auto
        template:
          - air_quality

      # Atomic Calendar Revive
      - type: "custom:atomic-calendar-revive"
        maxDaysToShow: 2
        showNoEventsForToday: false # hide card when no events today
        showNoEventsForNextDays: false # hide card when no events in the next days
        showLoader: false
        disableEventLink: true
        disableLocationLink: true
        compactMode: true
        showLocation: false
        showEventDate: true
        showEventIcon: false
        hoursOnSameLine: true
        showRelativeTime: true
        showProgressBar: true
        startDaysAhead: 4
        styles:
          card:
            - border-width: 0
        entities:
          - entity: calendar.family
            name: "Family"
            color: yellow
            blocklist: "(Zoom)|(word2)"
          - entity: calendar.formula_1
            name: "Formula 1"
            color: red
          - entity: calendar.holidays_in_united_states
            name: "Holidays"
            color: black
        card_mod:
          style: |
            ha-card {
              border: none;
              --card-height: inherit !important;
              position: absolute;
              bottom: 2vh;
            }
            @media (max-width: 800px) {
              ha-card {
                position: inherit;
              }
            }

`

Mode

Calendar

Card Version

9.6.1

Home Assistant Version

2024.2.2

Configuration

#################################################
      #                                               #
      #                    SIDEBAR                    #
      #                                               #
      #################################################

      - type: custom:vertical-stack-in-card
        view_layout:
          grid-area: sidebar
        card_mod:
          style: |
            ha-card {
              border: none;
            }
        cards:
          - type: custom:button-card
            entity: sensor.template_ptime
            template:
              - ptime

          # Added Weather-forcast Card
          - type: weather-forecast
            style: |
              ha-card {
                background: transparent !important;
                color: #fff !important;
                overflow: hidden !important;
                box-shadow: none !important;
                border: none !important;
              }
            entity: weather.openweathermap
            show_current: true
            show_forecast: false
            secondary_info_attribute: precipitation
            name: Culver City
            tap_action: !include popup/weather.yaml
            card_mod:
              style: |
                ha-card {
                  border: none;
                }

          - type: custom:hourly-weather
            entity: weather.pirateweather
            num_segments: 12 # optional, defaults to 12
            name: null # optional, defaults to "Hourly Weather"
            icons: true
            card_mod:
              style: |
                ha-card {
                  border: none;
                }

          # Clock-Weather-Card
          - type: custom:clock-weather-card
            style: |
              ha-card {
                background: transparent !important;
                color: #fff !important;
                overflow: hidden !important;
                box-shadow: none !important;
                border: none !important;
              }
            entity: weather.openweathermap
            tap_action: !include popup/weather2.yaml
            sun_entity: sun.sun
            weather_icon_type: line
            animated_icon: true
            forecast_rows: 5
            locale: en-GB
            time_pattern: HH:mm
            time_format: 24
            date_pattern: ccc, d.MM.yy
            hide_today_section: true
            hide_forecast_section: false
            hide_clock: true
            hide_date: true
            hourly_forecast: false
            use_browser_time: true
            time_zone: null
            card_mod:
              style: |
                ha-card {
                  border: none;
                }

          # Air Quality Button
          - type: custom:button-card
            entity: sensor.air_quality_combo
            style:
              left: auto
              right: auto
            template:
              - air_quality

          # Atomic Calendar Revive
          - type: "custom:atomic-calendar-revive"
            maxDaysToShow: 2
            showNoEventsForToday: false # hide card when no events today
            showNoEventsForNextDays: false # hide card when no events in the next days
            showLoader: false
            disableEventLink: true
            disableLocationLink: true
            compactMode: true
            showLocation: false
            showEventDate: true
            showEventIcon: false
            hoursOnSameLine: true
            showRelativeTime: true
            showProgressBar: true
            startDaysAhead: 4
            styles:
              card:
                - border-width: 0
            entities:
              - entity: calendar.family
                name: "Family"
                color: yellow
                blocklist: "(Zoom)|(word2)"
              - entity: calendar.formula_1
                name: "Formula 1"
                color: red
              - entity: calendar.holidays_in_united_states
                name: "Holidays"
                color: black
            card_mod:
              style: |
                ha-card {
                  border: none;
                  --card-height: inherit !important;
                  position: absolute;
                  bottom: 2vh;
                }
                @media (max-width: 800px) {
                  ha-card {
                    position: inherit;
                  }
                }

Relevant log output

No logs saying anything about Atomic Calendar

Code of Conduct

[X] I agree to follow this project's Code of Conduct

github-actions[bot] commented 4 months ago

Hello @chezpaul, thank you for your interest in our work! If this is a bug report, please provide your configuration and any screenshots that would assist troubleshooting, otherwise we can not help you.

chezpaul commented 4 months ago

Hey bot, I did provide screenshots and configs

marksie1988 commented 4 months ago

Hi, Im not sure why this would happen and havent been able to re-create it with the things i have available to me from that config.

If you move the atomic calendar card up to another position does the same thing happen?

My concern here is that this is more to do with the styles that have been modified than the card itself.

totaldebug / atomic-calendar-revive