Hello community!
I added Honeycomb menu to my tablet view and I created an helper input_boolean for the “more info”. When you click on it, using a conditional card, will display on the screen an additional card with some infor about that room. Sort of a persistent pop-up box.
I have an issue in defining a fixed size for my popup card that is always showing bigger than what I want:
This is the code:
type: conditional
conditions:
- condition: state
entity: input_boolean.info_sala
state: 'on'
card:
type: custom:layout-card
layout_type: horizontal
cards:
- type: custom:button-card
style: |
ha-card {
height: 40px; # Altezza fissa
width: 40px; # Larghezza fissa
}
layout: vertical
show_label: true
show_name: false
show_state: false
styles:
grid:
- grid-template-areas: '"i1" "i2" "i3" "i4"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr 1fr 1fr 1fr
custom_fields:
i1:
- margin-bottom: 4px
i2:
- margin-bottom: 4px
i3:
- margin-bottom: 4px
custom_fields:
i1: |
[[[ return `<ha-text>${states['input_text.sala'].state}</ha-text>` ]]]
i2: |
[[[
var icon1 = states['light.interruttore_sala'].state == 'on' ? 'mdi:lightbulb-on' : 'mdi:lightbulb';
var icon2 = states['light.ambiente_sala'].state == 'on' ? 'mdi:lightbulb-on' : 'mdi:lightbulb';
return `<ha-icon icon="${icon1}" style="width: 24px; height: 24px;"></ha-icon> <ha-icon icon="${icon2}" style="width: 24px; height: 24px;"></ha-icon>`;
]]]
i3: |
[[[
var icon1 = states['binary_sensor.sensore_movimento_sala_1_motion'].state == 'on' ? 'mdi:run-fast' : 'mdi:walk';
var icon2 = states['binary_sensor.sensore_movimento_sala_2_motion'].state == 'on' ? 'mdi:run-fast' : 'mdi:walk';
return `<ha-icon icon="${icon1}" style="width: 24px; height: 24px;"></ha-icon> <ha-icon icon="${icon2}" style="width: 24px; height: 24px;"></ha-icon>`;
]]]
i4: >
[[[ return
`<ha-text>${states['sensor.espresense_sala_temperature'].state}°</ha-text>`
]]]
Any suggestion ? Thank you!