At the moment the width is set to a specific width. so changing the tile size does increase the size but not the wrapper that makes the row.
This is more a bug i guess because it is easy to make it first max 3 tiles based on the tile width 
1 Like
Hi,
Maybe you can make a script in hass that opens the other popup and than call the script service to run the script. (did not try this but could work i think)
Thanks for the quick reply! I can live with that on my phone, the important thing is that it looks fine on my girlfriendâs iPhone 
True, if i fix it you can increase it but you always get phones where it wonât fit on the screen 
1 Like
One more question: I am using the rules to show some text in the âhomeâ area. This text is shown in browser and on the android app, but not on the iOS app. Also tried setting the color manually, no change.
Is this a known bug?
I canât use a script to call the popup, as the fire-event-dom is an Action, and canât be called from a script unfournatately.
Do you think it would be possible to add a color wheel to the popup? Thatâs the one thing that I canât figure out how to add myself 
A question for icons: I canât get the shutter icon to be displayed correctly, I tried all varieties with offIcons and offStates:
In my opinion the second tile should work, as that the "closed-shutter-icon should be displayed.
If I do not define an icon, it shows the window-icon, as seen on the third tile.
Also, if I try the other way round (define standard as closed, âoffStatesâ as open), the icon never switches to open⊠(fourth tile)
entities:
- entity: cover.schlafzimmer_rollladen_1
icon: 'mdi:window-shutter-open'
officon: 'mdi:window-shutter'
- entity: cover.schlafzimmer_rollladen_2
icon: 'mdi:window-shutter-open'
officon: 'mdi:window-shutter'
offStates: closed
- entity: cover.zwizi_rollladen_1
offStates: open
- entity: cover.zwizi_rollladen_2
icon: 'mdi:window-shutter'
officon: 'mdi:window-shutter-open'
offStates: open
Hi,
Thanks @DBuit for your great job.
Iâm trying to finalise my living room panel card but on my mobile (Home assistant Companion on my Huawei P30), I have an horizontal scrollbar that appears for 4px and I donât know how to resolve it.
Here is my code :
popup_cards:
cover.roller_shutter_3_current_value:
title: Volet gauche
card:
type: 'custom:cover-popup-card'
entity: cover.roller_shutter_3_current_value
sliderService: cover.set_cover_position
actionsInARow: 3
actions:
- service: cover.open_cover
service_data:
entity_id: cover.roller_shutter_3_current_value
name: Ouvrir
icon: 'mdi:window-shutter-open'
- service: cover.stop_cover
service_data:
entity_id: cover.roller_shutter_3_current_value
name: Stop
icon: 'mdi:stop'
- service: cover.close_cover
service_data:
entity_id: cover.roller_shutter_3_current_value
name: Fermer
icon: 'mdi:window-shutter'
cover.roller_shutter_3_current_value_3:
title: Volet gauche
card:
type: 'custom:cover-popup-card'
entity: cover.roller_shutter_3_current_value_3
sliderService: cover.set_cover_position
actionsInARow: 3
actions:
- service: cover.open_cover
service_data:
entity_id: cover.roller_shutter_3_current_value_3
name: Ouvrir
icon: 'mdi:window-shutter-open'
- service: cover.stop_cover
service_data:
entity_id: cover.roller_shutter_3_current_value_3
name: Stop
icon: 'mdi:stop'
- service: cover.close_cover
service_data:
entity_id: cover.roller_shutter_3_current_value_3
name: Fermer
icon: 'mdi:window-shutter'
views:
- title: Home
path: home
badges: []
background: center / cover no-repeat fixed url('/local/img/background-mobile.jpg')
cards:
- type: 'custom:homekit-card'
statePositionTop: true
tileHoldAnimation: true
horizontalScroll: false
home: true
title: Salon
style: |
:host {
--tile-background: rgba(255, 255, 255, 0.8);
--tile-border-radius: 12px;
--tile-on-background: rgba(255, 255, 255, 1);
--tile-name-text-color: rgba(0, 0, 0, 0.4);
--tile-on-name-text-color: rgba(0, 0, 0, 1);
--tile-state-text-color: rgba(0, 0, 0, 0.4);
--tile-on-state-text-color: rgba(0, 0, 0, 1);
--tile-state-changed-text-color: rgb(134, 134, 134);
--tile-unavailable-state-text-color: rgba(255, 0, 0, 1);
--tile-value-text-color: rgba(255, 0, 0, 1);
--tile-icon-color: rgba(0, 0, 0, 0.3);
--tile-on-icon-color: #f7d959;
--tile-width-mobile: 90px;
--tile-height-mobile: 90px;
--min-header-height: 10px;
--tile-icon-size: 30px;
--tile-image-radius: 100%
}
rules: >
{% if is_state('light.lumieres_salon','off') %}
<li>{{states('sensor.next_living_room_scene_debut_soiree')}}</li> {%
endif %}
<li>{{states('sensor.next_living_room_cover_action')}}</li>
entities:
- entities:
- entity: sensor.sonde_salon_temperature
name: Température
icon: 'mdi:thermometer'
wider: true
halfheight: true
hideState: true
- entity: sensor.sonde_salon_humidity
name: ' '
icon: 'mdi:water-percent'
wider: false
halfheight: true
hideState: true
- entities:
- entity: light.lumieres_salon
name: LumiĂšres
icon: 'mdi:lamps'
- entity: light.hue_white_lamp_2
name: Buffet
icon: 'mdi:lamp'
- entity: light.hue_white_lamp_1
name: Buffet
icon: 'mdi:floor-lamp'
title: LumiĂšres
popup:
type: 'custom:light-popup-card'
- entities:
- entity: cover.roller_shutter_3_current_value
name: Volet droit
icon: 'mdi:window-shutter-open'
offIcon: 'mdi:window-shutter'
offStates:
- closed
state: cover.roller_shutter_3_current_value
statePath: attributes.current_position
tap_action:
action: more-info
entity: cover.roller_shutter_3_current_value
- entity: cover.roller_shutter_3_current_value_3
name: Volet gauche
state: cover.roller_shutter_3_current_value_3
icon: 'mdi:window-shutter-open'
offIcon: 'mdi:window-shutter'
offStates:
- closed
statePath: attributes.current_position
tap_action:
action: more-info
entity: cover.roller_shutter_3_current_value_3
title: Volets roulants
- entities:
- custom: Début de soirée
name: Début de soirée
icon: 'mdi:play-box'
tap_action:
action: call-service
service: scene.turn_on
service_data:
entity_id: scene.salon_debut_de_soiree
- custom: LumiÚre tamisée
name: LumiÚre tamisée
icon: 'mdi:play-box'
tap_action:
action: call-service
service: scene.turn_on
service_data:
entity_id: scene.salon_lumiere_tamisee
title: ScĂšnes
Thanks for any advice or solution 
Hi Guys,
could anybody help me with the style options? sadly I donât have any CSS experience.
I am using a swipe-card in a homekit style card and inside that swipe-card Iâm using vertical and horizontal stacks for button cards.
I would like to change the homekit panel card where the swipe-card is inside to fully transparent.
My code:
type: 'custom:homekit-card'
...
style: |
:host {
--tile-background: rgba(20, 20, 20, 0.22);
--tile-border-radius: 16px;
--tile-width: 100px;
--tile-height: 100px;
--tile-width-mobile: 78px;
--tile-height-mobile: 78px;
--tile-on-background: rgba(150, 150, 150, 0.30); var(--card-background-color);
...
- column: 2
tileOnRow: 3
entities:
- title: Media
entities:
- card: 'custom:swipe-card'
wider: true
higher: true
widerSize: 2
higherSize: 2
noPadding: true
cardOptions:
parameters:
start_card: 2
autoplay:
delay: 3000
speed: 1000
cards:
- type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: 'custom:button-card'
I know how to change the style of all homekit-cards as it is on the top, but how am I able to implement individual styling (color) to specific homekit cards?
appreciate any help!
Greetings
Hello,
I cant get the switch-popup-card to work with input_select.set_options.
I get error: required key not provided @ data[âoptionsâ]
Any suggestions?
- entity: input_select.housemode
popup:
type: 'custom:switch-popup-card'
noActiveState: '-'
entity_value_path: state
service: input_select.set_options
service_data: null
options: "value"
entities:
- input_select.housemode
buttons:
- icon: 'mdi:home'
value: 'Hjemme'
name: 'Hjemme'
color: '#FFF'
- icon: 'mdi:weather-night'
value: 'Natt'
name: 'Natt'
color: '#FFF'
- icon: 'mdi:home-export-outline'
value: 'Borte'
name: 'Borte'
color: '#FFF'
- icon: 'mdi:account-multiple'
value: 'Gjest'
name: 'Gjest'
color: '#FFF'
You can add a settings card to the popup card.
And you can use this card: GitHub - ljmerza/light-entity-card: Control any light or switch entity to display a color wheel.
Hi @kruton
Can you check in the developer tools for these entities what the state is? Maybe it is not open / closed but 0 / 100 ?
1 Like
Hi @joffrey71 ,
Maybe remove the first entities row where u used halfHeight option. Should work but just to check if that is the problem. It should fit.
You can also set --tile-width-mobile & --tile-height-mobile to 85px maybe to see if it fixes the issue.
Hi @Lundig ,
I have not got input_select so trying to help without testing.
But first options: "value" does not do anything, remove that
Your service_data cannot be null this is the information you send to the service.
I guess it should be:
service_data:
entity_id: this
option: value
Where this will be replaced with the enity in the entities option
and value will be replaced with the value set on the buttons.
Are you sure you wanna use the service set_options this set all the options for the select or you just wanna choose one option? because that is more likely with this card than you should use set_option
Yes, I want to choose one option. I have an input_select with 4 âoptionsâ
housemode:
name: Husmodus
options:
['Hjemme', 'Natt', 'Borte', 'Gjest']
icon: mdi:home
When i updated the code with this it worked, thanks 
service_data:
entity_id: this
options: "value"
1 Like
Hello everyone,
Just released new version: Release fire-dom-events and icon color fix · DBuit/Homekit-panel-card · GitHub
Got 2 new options:
I added the fire-dom-events as an option for tap_actions so you can call browser_mod for example when tapping a tile.
Example config:
tap_action:
action: fire-dom-event
browser_mod:
command: popup
title: 'My Title'
card:
type: 'custom:mini-graph-card'
entities:
- weather.weersverwachting
I also added useRGB in the config for the card, it is an addition on the useBrightness and useTemperature to disable the change of the icon color based on the light. I hope this fixes issues where people got i white icon somehow while brightness and temperature are off.
thank you! I was waiting fro an update as such so I really approcate your work on this AMAZING project.
however, it seems not to work for me, I dont know why but tap action doesnât do anithing after I updated to latest version, changed the lovelace code and refreshed.
- entity: switch.4310301898f4abfe0ab8
state: sensor.octoprint_job_percentage
image: /local/lovelace_assets/ender3pro_2.png
offImage: /local/lovelace_assets/ender3pro_2.png
#icon: mdi:printer-3d
name: Ender 3 Pro
tap_action:
action: fire-dom-event
browser_mod:
command: popup
title: 'My Title'
card:
type: vertical-stack
cards:
- camera_image: camera.m5_cam
style: "ha-card { margin-top: 20px; }"
type: picture-glance
title: Ender Camera
tap_action:
action: more-info
entities:
- entity: binary_sensor.m5_cam_192_168_1_138
show_state: true
- entity: camera.m5_cam
show_state: true
- type: entities
show_header_toggle: false
entities:
- type: buttons
entities:
- entity: switch.4310301898f4abfe0ab8
name: Ender Power
- entity: switch.ender_led_realy
name: Led light
icon: mdi:lightbulb
- type: divider
- automation.connect_to_octoprint_when_3d_printer_on
- automation.turn_3d_printer_off_when_printing_is_done
Hello @Amitaia
maybe try less complex popup just to see it working, to make sure it is not something in the popup config.
Also if you use HACS delete all local browser cache to make sure the new code is loading (i always need to do this )