Icon way too big - Githubissues

fin05 commented 6 months ago

Checklist:

[X ] I updated to the latest version available
[ X] I cleared the cache of my browser
[X ] I read the FAQ and the issue I'm having was not mentioned there.

Release with the issue:

Last working release (if known):

Browser and Operating System: Chrome and Firefox

Description of problem: The sun/moon icon is way too big and making the height of the card take up too much space - I need a way to reduce the size of it and reclaim the lost space

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

Additional information:

pkissling commented 6 months ago

duplicates #132

fin05 commented 6 months ago

I read that previously - it reduces the margin some but doesn't now alleviate the issue of the icon being too big - that fix does not work in my scenario

pkissling commented 6 months ago

I read that previously - it reduces the margin some but doesn't now alleviate the issue of the icon being too big - that fix does not work in my scenario

i see. what kind of mod are you using to span clock-weather-card over multiple columns? i am under the impression that this is no lovelace default layout, or?

fin05 commented 6 months ago

The dashboard is a grid layout. The card is a single column grid card - I'm using it on my dashboard for a touch screen kiosk

pkissling commented 6 months ago

can you please provide your full lovelace yaml so that i can reproduce the problem?

fin05 commented 6 months ago

views:

title: Home path: overview icon: '' visible:
- user: 9e62ae39947f4c8baf5d48e436c79637
- user: 4cf0a372b67449f6ab7076bf71137c73
- user: 5c01883e3ab644b78866d88863929547 width: 300 max_cols: 1 subview: false cards:
- square: false type: grid title: Lights & Doors cards:
  - type: custom:mushroom-entity-card icon_color: blue layout: vertical secondary_info: none icon_type: icon icon: mdi:sofa tap_action: action: navigate navigation_path: '#livingroom' name: Main Area fill_container: false entity: switch.main_area card_mod: style: | ha-card { --icon-size: 0px; --card-primary-font-size: 15px; height: 40px !important; } ha-state-icon { --icon-symbol-size: 20px; padding-top: 17px; }
  - type: custom:mushroom-entity-card icon_color: red layout: vertical secondary_info: none icon_type: icon icon: mdi:silverware-fork-knife tap_action: action: navigate navigation_path: '#kitchen' name: Kitchen fill_container: false hold_action: action: none double_tap_action: action: none entity: switch.kitchen_lights card_mod: style: | ha-card { --icon-size: 0px; --card-primary-font-size: 15px; height: 40px !important; } ha-state-icon { --icon-symbol-size: 20px; padding-top: 17px; }
  - type: custom:mushroom-entity-card icon_color: deep-purple layout: vertical secondary_info: none icon: cil:imac-alternative tap_action: action: navigate navigation_path: '#office' name: Office hold_action: action: none double_tap_action: action: none icon_type: icon entity: switch.office_light card_mod: style: | ha-card { --icon-size: 0px; --card-primary-font-size: 15px; height: 40px !important; } ha-state-icon { --icon-symbol-size: 20px; padding-top: 17px; }
  - type: custom:mushroom-entity-card icon_color: green layout: vertical secondary_info: none icon: mdi:bed-king tap_action: action: navigate navigation_path: '#master' name: Master Suite icon_type: icon entity: switch.master_suite card_mod: style: | ha-card { --icon-size: 0px; --card-primary-font-size: 15px; height: 40px !important; } ha-state-icon { --icon-symbol-size: 20px; padding-top: 17px; }
  - type: custom:mushroom-entity-card icon_color: deep-orange layout: vertical secondary_info: none icon_type: icon icon: mdi:theater tap_action: action: navigate navigation_path: '#theater' name: Theater entity: switch.theater_room_lights card_mod: style: | ha-card { --icon-size: 0px; --card-primary-font-size: 15px; height: 40px !important; } ha-state-icon { --icon-symbol-size: 20px; padding-top: 17px; }
  - type: custom:mushroom-entity-card icon_color: blue-grey layout: vertical secondary_info: none icon_type: icon icon: mdi:garage-variant tap_action: action: navigate navigation_path: '#garage' name: Garage entity: switch.garage_light card_mod: style: | ha-card { --icon-size: 0px; --card-primary-font-size: 15px; height: 40px !important; } ha-state-icon { --icon-symbol-size: 20px; padding-top: 17px; }
  - type: custom:mushroom-entity-card icon_color: yellow layout: vertical secondary_info: none icon_type: icon icon: mdi:weather-sunny tap_action: action: navigate navigation_path: '#outside' name: Outside entity: switch.outside_lights card_mod: style: | ha-card { --icon-size: 0px; --card-primary-font-size: 15px; height: 40px !important; } ha-state-icon { --icon-symbol-size: 20px; padding-top: 17px; }
  - type: custom:mushroom-entity-card icon_color: white secondary_info: none icon_type: icon icon: mdi:bed tap_action: action: navigate navigation_path: '#guest' name: 'Guest ' fill_container: false layout: vertical hold_action: action: none double_tap_action: action: none entity: switch.guest_rooms card_mod: style: | ha-card { --icon-size: 0px; --card-primary-font-size: 15px; height: 40px !important; } ha-state-icon { --icon-symbol-size: 20px; padding-top: 17px; }
  - type: custom:mushroom-entity-card entity: cover.garage_big_door_door icon_color: green layout: horizontal secondary_info: state icon_type: icon icon: mdi:garage-variant tap_action: action: toggle name: Big Door fill_container: false card_mod: style: | ha-card { --icon-size: 0px; --card-primary-font-size: 15px; height: 40px !important; } ha-state-icon { --icon-symbol-size: 25px; padding-top: 0px; }
  - type: custom:mushroom-entity-card entity: cover.smart_garage_small_door icon_color: green layout: horizontal secondary_info: state icon_type: icon icon: mdi:garage tap_action: action: toggle name: Small Door fill_container: false card_mod: style: | ha-card { --icon-size: 0px; --card-primary-font-size: 15px; height: 40px !important; } ha-state-icon { --icon-symbol-size: 25px; padding-top: 0px; }
  - type: custom:mushroom-entity-card entity: lock.frdrlk layout: horizontal secondary_info: state icon_type: icon icon: mdi:lock tap_action: action: toggle name: Front Door fill_container: false icon_color: green card_mod: style: | ha-card { --icon-size: 0px; --card-primary-font-size: 15px; height: 40px !important; } ha-state-icon { --icon-symbol-size: 25px; padding-top: 0px; }
  - type: custom:mushroom-entity-card entity: automation.aldi layout: horizontal secondary_info: none icon_type: none icon: mdi:lock tap_action: action: none fill_container: false icon_color: green primary_info: none hold_action: action: none double_tap_action: action: none card_mod: style: | ha-card { --icon-size: 0px; --card-primary-font-size: 15px; height: 40px !important; } ha-state-icon { --icon-symbol-size: 25px; padding-top: 0px; }
    columns: 6
- square: false type: grid title: Entertainment cards:
  - show_name: true show_icon: true type: button entity: script.living_room_plex icon: mdi:plex hold_action: action: none icon_height: 20px name: Start Plex tap_action: action: call-service service: script.open_plex target: {} card_mod: style: | ha-card { height: 50px !important; }
  - show_name: true show_icon: true type: button tap_action: action: navigate navigation_path: /dashboard-plex/0 entity: sensor.exos_router_kib_s_received name: Plex Movies icon: mdi:movie-roll hold_action: action: none icon_height: 20px card_mod: style: | ha-card { height: 50px !important;
  - show_name: true show_icon: true type: button tap_action: action: navigate navigation_path: /dashboard-plex/tv-shows entity: sensor.exos_router_kib_s_received name: Plex TV icon: mdi:television-classic hold_action: action: none icon_height: 20px card_mod: style: | ha-card { height: 50px !important;
  - show_name: true show_icon: true type: button tap_action: action: navigate navigation_path: /d5369777_music_assistant_beta entity: sensor.exos_router_kib_s_received icon: mdi:music hold_action: action: none icon_height: 20px name: 'Jukebox ' card_mod: style: | ha-card { height: 50px !important;
  - show_name: true show_icon: true type: button entity: media_player.denon_avr_x1300w icon: mdi:audio-video hold_action: action: none name: Reciever icon_height: 20px show_state: false card_mod: style: | ha-card { height: 50px !important; columns: 5
- type: custom:weather-chart-card entity: weather.main_floor show_main: true show_temperature: true show_current_condition: true show_attributes: false show_time: true show_time_seconds: false show_day: false show_date: false show_humidity: false show_pressure: false show_wind_direction: false show_wind_speed: false show_sun: false show_feels_like: false use_12hour_format: true icons_size: '20' animated_icons: false icon_style: style1 forecast: precipitation_type: probability show_probability: false labels_font_size: '10' precip_bar_size: '80' style: style1 show_wind_forecast: true condition_icons: true round_temp: false type: daily number_of_forecasts: '0' chart_height: '165' units: pressure: '' speed: mph title: '' day_date_size: '10' time_size: '20' current_temp_size: '25'
- square: true type: grid cards:
  - type: custom:atomic-calendar-revive enableModeChange: true entities:
    - entity: update.atomic_calendar_revive_update icon: ''
    - entity: calendar.xxxxxxxx_gmail_com name: xxxxxxxxx@gmail.com showMultiDay: true showDeclined: false showDate: true hideFinishedEvents: false showProgressBar: false showCurrentEventLine: false dimFinishedEvents: true maxDaysToShow: 30 cardHeight: 495px showFullDayProgress: false showEventIcon: false showNoEventsForToday: true compactMode: false offsetHeaderDate: false allDayBottom: false showAllDayEvents: true defaultMode: Calendar
  - type: todo-list entity: todo.shopping_list title: Shopping List card_mod: style: | ha-card { height: 495px !important; max-height: 495px; overflow-y: scroll; }
  - type: custom:weather-radar-card show_recenter: true square_map: false show_marker: true show_scale: true show_range: false extra_labels: false zoom_level: 7 show_playback: false show_zoom: true static_map: false data_source: RainViewer-Rainbow card_mod: style: | ha-card { height: 495px !important; } columns: 3
- square: false type: grid cards:
  - show_state: false show_name: false camera_view: live type: picture-entity entity: camera.frontdoor0 aspect_ratio: '16:9' camera_image: camera.frontdoor0
  - show_state: false show_name: false camera_view: live type: picture-entity entity: camera.frontyard0 camera_image: camera.frontyard0
  - show_state: false show_name: false camera_view: live type: picture-entity entity: camera.rightside0 camera_image: camera.rightside0
  - show_state: false show_name: false camera_view: live type: picture-entity entity: camera.leftside0 camera_image: camera.leftside0
  - show_state: false show_name: false camera_view: live type: picture-entity entity: camera.driveway0 camera_image: camera.driveway0
  - show_state: false show_name: false camera_view: live type: picture-entity entity: camera.garage0 camera_image: camera.garage0 aspect_ratio: '16:9'
  - show_state: false show_name: false camera_view: live type: picture-entity camera_image: camera.patio0 entity: camera.patio0
  - show_state: false show_name: false camera_view: live type: picture-entity entity: camera.backyard_right0 camera_image: camera.backyard_right0
  - show_state: false show_name: false camera_view: live type: picture-entity entity: camera.backyard_left0 camera_image: camera.backyard_left0 title: Security
- type: custom:gap-card height: 5
- square: false type: grid card_mod: style: | ha-card { height: 130px !important; } cards:
  - type: tile entity: climate.main_floor name: Main vertical: true hide_state: false show_entity_picture: false icon: phu:thermostat
  - type: tile entity: climate.upstairs vertical: true hide_state: false icon: phu:thermostat name: Upstairs
  - type: custom:mushroom-vacuum-card entity: vacuum.mayhem_vac layout: vertical commands: [] card_mod: style: | ha-card {
```
   height: 130px !important; 
   }
```
  - type: gauge entity: sensor.finn_bot_litter_level name: Litter min: 0 max: 100 needle: true severity: green: 66 yellow: 33 red: 0 card_mod: style: | ha-card { height: 130px !important; }
  - type: gauge entity: sensor.finn_bot_waste_drawer name: Poop min: 0 max: 100 needle: true severity: green: 0 yellow: 50 red: 80 card_mod: style: | ha-card { height: 130px !important; } columns: 5
- type: vertical-stack cards:
  - type: custom:bubble-card card_type: pop-up hash: '#kitchen' name: Kitchen entity: switch.kitchen_lights margin_top_desktop: 50% margin_top_mobile: 50% shadow_opacity: 0 bg_color: rgba(108. 122. 137. 1) bg_opacity: 50
  - type: custom:bubble-card card_type: separator name: Lights icon: mdi:lightbulb-group
  - type: horizontal-stack cards:
    - type: custom:bubble-card card_type: button entity: switch.kitchen_sink name: Sink
    - type: custom:bubble-card card_type: button entity: switch.kitchen_counter name: Counter
    - type: custom:bubble-card card_type: button entity: switch.kitchen_nook name: Nook
  - type: horizontal-stack cards:
    - type: custom:bubble-card card_type: button entity: switch.kitchen_top_cabinets name: Upper Cabinet
    - type: custom:bubble-card card_type: button entity: switch.kitchen_bottom_cabinets name: Lower Cabinet show_state: false
- type: vertical-stack cards:
  - type: custom:bubble-card card_type: pop-up hash: '#livingroom' entity: switch.main_area name: Main Area icon: mdi:sofa-outline state: sensor.main_floor_temperature margin_top_desktop: 50% margin_top_mobile: 50% bg_opacity: 50 bg_color: rgba(108. 122. 137. 1)
  - type: custom:bubble-card card_type: separator name: Lights icon: mdi:lightbulb-group
  - type: horizontal-stack cards:
    - type: custom:bubble-card card_type: button entity: switch.living_room_light name: Ceiling icon: mdi:ceiling-fan
    - type: custom:bubble-card card_type: button entity: switch.smart_plug_mini_5_socket_1 name: Lamp button_type: switch icon: mdi:lamp
    - type: custom:bubble-card card_type: button entity: switch.main_hallway_light name: Main Hallway icon: phu:ceiling-round
  - type: horizontal-stack cards:
    - type: custom:bubble-card card_type: button entity: switch.entry_way name: Entry Way button_type: switch icon: mdi:ceiling-light
    - type: custom:bubble-card card_type: button entity: switch.dining_room name: Dining Room icon: mdi:light-recessed
    - type: custom:bubble-card card_type: button entity: switch.dining_room_table name: Dining Table icon: phu:chandelier
  - type: horizontal-stack cards:
    - type: custom:bubble-card card_type: button entity: media_player.lg_webos_smart_tv name: LG TV button_type: switch icon: mdi:television
    - type: custom:bubble-card card_type: button entity: media_player.denon_avr_x1300w name: Receiver show_state: false button_type: slider
- type: vertical-stack cards:
  - type: custom:bubble-card card_type: pop-up hash: '#office' name: Office entity: switch.office_light icon: cil:laptop-mac margin_top_mobile: 50% margin_top_desktop: 50% bg_color: rgba(108. 122. 137. 1)
  - type: custom:bubble-card card_type: separator name: Lights icon: mdi:lightbulb-group
  - type: horizontal-stack cards:
    - type: custom:bubble-card card_type: button entity: switch.office_light name: Light icon: mdi:ceiling-fan-light
    - type: custom:bubble-card card_type: button entity: switch.office_fan name: Fan icon: mdi:ceiling-fan
- type: vertical-stack cards:
  - type: custom:bubble-card card_type: pop-up hash: '#master' entity: switch.master_suite name: Master Suite icon: mdi:bed-king-outline state: sensor.main_floor_temperature margin_top_mobile: 50% margin_top_desktop: 50% bg_color: rgba(108. 122. 137. 1)
  - type: custom:bubble-card card_type: separator name: Lights icon: mdi:lightbulb-group
  - type: horizontal-stack cards:
    - type: custom:bubble-card card_type: button entity: switch.master_bedroom_light name: Ceiling icon: mdi:ceiling-fan-light
    - type: custom:bubble-card card_type: button entity: switch.master_bedroom_fan button_type: switch icon: mdi:ceiling-fan name: Fan
    - type: custom:bubble-card card_type: button entity: switch.master_bedroom_can_lights name: Can Lights icon: mdi:light-recessed
  - type: horizontal-stack cards:
    - type: custom:bubble-card card_type: button entity: switch.master_bath_vanity name: Vanity icon: mdi:vanity-light
    - type: custom:bubble-card card_type: button entity: switch.master_hallway_light name: Hallway button_type: switch icon: phu:ceiling-round
    - type: custom:bubble-card card_type: button entity: switch.emily_bathroom_socket_1 name: 'Emily ' icon: mdi:hair-dryer-outline
  - type: horizontal-stack cards:
    - type: custom:bubble-card card_type: button entity: media_player.master_bedroom_tv name: Master TV button_type: switch icon: mdi:television
    - type: custom:bubble-card card_type: button entity: number.smart_pet_feeder_al_feed name: Feed Finn show_state: false button_type: switch icon: mdi:cat
- type: vertical-stack cards:
  - type: custom:bubble-card card_type: pop-up hash: '#theater' entity: switch.theater_room_lights name: Theater Room icon: mdi:theater state: sensor.upstairs_temperature margin_top_mobile: 50% margin_top_desktop: 50% bg_color: rgba(108. 122. 137. 1)
  - type: custom:bubble-card card_type: separator name: Lights icon: mdi:lightbulb-group
  - type: horizontal-stack cards:
    - type: custom:bubble-card card_type: button entity: switch.staircase_lights name: Staircase icon: mdi:coach-lamp-variant
    - type: custom:bubble-card card_type: button entity: switch.smart_plug_mini_3_socket_1 name: Posters button_type: switch icon: mdi:post-outline
    - type: custom:bubble-card card_type: button entity: switch.smart_plug_mini_2_socket_1 name: Projector
  - type: horizontal-stack cards:
    - type: custom:bubble-card card_type: button entity: switch.theater_front_lights name: Front icon: mdi:light-recessed
    - type: custom:bubble-card card_type: button entity: switch.theater_center_lights name: Center button_type: switch icon: mdi:light-recessed
    - type: custom:bubble-card card_type: button entity: switch.theater_rear_lights name: Rear icon: mdi:light-recessed
- type: vertical-stack cards:
  - type: custom:bubble-card card_type: pop-up hash: '#garage' name: Garage entity: switch.garage_light icon: mdi:garage-variant margin_top_mobile: 50% margin_top_desktop: 50% bg_color: rgba(108. 122. 137. 1)
  - type: custom:bubble-card card_type: separator name: Lights icon: mdi:lightbulb-group
  - type: horizontal-stack cards:
    - type: custom:bubble-card card_type: button entity: cover.garage_big_door_door name: Big Door icon: mdi:garage-variant
    - type: custom:bubble-card card_type: button entity: cover.smart_garage_small_door name: Small Door icon: mdi:garage
  - type: horizontal-stack cards:
    - type: custom:bubble-card card_type: button entity: switch.garage_light name: Light icon: mdi:lightbulb-fluorescent-tube-outline
    - type: custom:bubble-card card_type: button entity: media_player.gym_2 name: Gym TV icon: mdi:television
- type: vertical-stack cards:
  - type: custom:bubble-card card_type: pop-up hash: '#outside' entity: switch.outside_lights name: Outside icon: mdi:white-balance-sunny state: weather.main_floor margin_top_mobile: 50% margin_top_desktop: 50% bg_color: rgba(108. 122. 137. 1)
  - type: custom:bubble-card card_type: separator name: Lights icon: mdi:lightbulb-group
  - type: horizontal-stack cards:
    - type: custom:bubble-card card_type: button entity: switch.front_door name: Front Door icon: mdi:coach-lamp
    - type: custom:bubble-card card_type: button entity: switch.front_sidewalk name: Sidewalk button_type: switch icon: mdi:coach-lamp
    - type: custom:bubble-card card_type: button entity: switch.patio name: Patio icon: mdi:light-recessed
  - type: horizontal-stack cards:
    - type: custom:bubble-card card_type: button entity: remote.patio_gtv name: Patio TV button_type: switch icon: mdi:television
    - type: custom:bubble-card card_type: button entity: media_player.denon_avr_x1300w_2 name: Receiver show_state: false button_type: slider
- type: vertical-stack cards:
  - type: custom:bubble-card card_type: pop-up hash: '#guest' entity: switch.guest_rooms name: Guest Rooms icon: mdi:bed margin_top_mobile: 50% margin_top_desktop: 50% bg_color: rgba(108. 122. 137. 1)
  - type: custom:bubble-card card_type: separator name: Guest Room 1 icon: mdi:lightbulb-group
  - type: horizontal-stack cards:
    - type: custom:bubble-card card_type: button entity: switch.guest_room_1_light icon: mdi:ceiling-fan-light name: Light
    - type: custom:bubble-card card_type: button entity: switch.guest_room_1_fan button_type: switch icon: mdi:ceiling-fan name: Fan
    - type: custom:bubble-card card_type: button entity: switch.guest_room_1_closet name: Closet icon: mdi:lightbulb
  - type: custom:bubble-card card_type: separator icon: mdi:lightbulb-group name: Guest Room 2
  - type: horizontal-stack cards:
    - type: custom:bubble-card card_type: button entity: switch.guest_room_2_light icon: mdi:ceiling-fan-light name: Light
    - type: custom:bubble-card card_type: button entity: switch.guest_room_2_fan button_type: switch icon: mdi:ceiling-fan name: Fan
    - type: custom:bubble-card card_type: button entity: switch.guest_room_2_closet name: Closet icon: mdi:lightbulb layout: {} type: custom:grid-layout title: ''

pkissling commented 6 months ago

the snippet above does not contain clock-weather-card

pkissling / clock-weather-card

Icon way too big #336