I love this card for my main (large screen) dashboard, and have been trying to adapt to tablet/mobile view. Is there any way to have just a row of toggles, with no icon and label on the left side - so more toggles will fit?
Row one - 4 columns
Row two - 5 columns
Row three - 6 columns
Row four - 6 columns (blank name, blank icon)
Row five - 7 columns (blank name, blank icon)
Row six - 7 columns (blank name, removed icon)
But removing the main icon may not help - depends on “3 or 4 columns of cards are displayed”.
type: entities
entities:
- type: 'custom:multiple-entity-row'
entity: sun.sun
entities:
- entity: sun.sun
styles:
width: 50px
- entity: sun.sun
name: false
icon: true
styles:
width: 30px
- entity: sun.sun
toggle: true
styles:
width: 50px
name: ''
show_state: true
styles:
width: 50px
- type: 'custom:multiple-entity-row'
entity: sun.sun
entities:
- entity: sun.sun
styles:
width: 50px
- entity: sun.sun
name: false
icon: true
styles:
width: 30px
- entity: sun.sun
toggle: true
styles:
width: 50px
- entity: sun.sun
toggle: true
styles:
width: 50px
name: ''
show_state: true
styles:
width: 50px
- type: 'custom:multiple-entity-row'
entity: sun.sun
entities:
- entity: sun.sun
styles:
width: 50px
- entity: sun.sun
name: false
icon: true
styles:
width: 30px
- entity: sun.sun
toggle: true
styles:
width: 50px
- entity: sun.sun
toggle: true
styles:
width: 50px
- entity: sun.sun
toggle: true
styles:
width: 50px
name: ''
show_state: true
styles:
width: 50px
- type: 'custom:multiple-entity-row'
entity: sun.sun
entities:
- entity: sun.sun
styles:
width: 50px
- entity: sun.sun
name: false
icon: true
styles:
width: 30px
- entity: sun.sun
toggle: true
styles:
width: 50px
- entity: sun.sun
toggle: true
styles:
width: 50px
- entity: sun.sun
toggle: true
styles:
width: 50px
name: ' '
icon: 'mdi:blank'
show_state: true
styles:
width: 50px
- type: 'custom:multiple-entity-row'
entity: sun.sun
entities:
- entity: sun.sun
styles:
width: 50px
- entity: sun.sun
name: false
icon: true
styles:
width: 30px
- entity: sun.sun
toggle: true
styles:
width: 50px
- entity: sun.sun
toggle: true
styles:
width: 50px
- entity: sun.sun
toggle: true
styles:
width: 50px
- entity: sun.sun
toggle: true
styles:
width: 50px
name: ' '
icon: 'mdi:blank'
show_state: true
styles:
width: 50px
- type: 'custom:multiple-entity-row'
entity: sun.sun
style:
hui-generic-entity-row:
$: |
state-badge {
display: none;
}
entities:
- entity: sun.sun
styles:
width: 50px
- entity: sun.sun
name: false
icon: true
styles:
width: 30px
- entity: sun.sun
toggle: true
styles:
width: 50px
- entity: sun.sun
toggle: true
styles:
width: 50px
- entity: sun.sun
toggle: true
styles:
width: 50px
- entity: sun.sun
toggle: true
styles:
width: 50px
name: ' '
icon: 'mdi:blank'
show_state: true
styles:
width: 50px
2 Likes
Thanks for posting the examples, very helpful. Still having issues on mobile - it cuts off anything over 4 columns. So in this example, I can see Closet, Bath, Bedroom, and Motion - but the right two entities (Fan and All) get cut off.
type: entities
entities:
- type: 'custom:multiple-entity-row'
entity: light.master_suite_lights
state_header: All
toggle: true
style:
width: 50px
entities:
- entity: input_boolean.master_suite_pirs
name: Motion
toggle: true
styles:
width: 50px
- entity: light.bedroom_lights
name: Bedroom
toggle: true
styles:
width: 50px
- entity: light.master_bath
name: Bath
toggle: true
styles:
width: 50px
- entity: light.master_closet
name: Closet
toggle: true
styles:
width: 50px
- entity: light.bath_fan
name: Fan
toggle: true
styles:
width: 50px
name: ' '
icon: 'mdi:blank'
show_state: true
styles:
width: 50px
Separate issue, but are state icons work here? I tried the below, but no change
state:
- value: 'on'
color: green
icon: 'mdi:motion-sensor'
- value: 'off'
color: red
icon: 'mdi:motion-sensor-off'
tap_action:
action: toggle
Do not work.
Use another options.
Yo may use a smaller font.
1 Like
Been playing with this for a while and had a look but can’t see any obvious solutions, any advice appriciated.
Trying to move everything to the left.
type: entities
entities:
- type: 'custom:multiple-entity-row'
entity: sensor.weatherlink_wind_direction
style:
hui-generic-entity-row:
$: |
state-badge {
display: none;
}
entities:
- entity: sensor.weatherlink_wind_direction
name: Dir
styles:
width: 20px
- entity: sensor.vantage_wind_speed_last
name: Speed
styles:
width: 20px
- entity: sensor.vantage_wind_speed_gust_last_10_min
name: gust
styles:
width: 20px
name: ' '
icon: 'mdi:blank'
show_state: false
styles:
width: 200px
My best guess is that the 20px is way too small. On my screen that is about 1 cm and you are trying to put “1.2 kts” into it, which leads it to wrap the line
Try with something large like 100px(i am using 90px for similar things) and then reducee it.
Hi there,
I am struggeling getting a slider shown inline within a multiple-entity-row. It’s not showing for whatever reason…
Code is here:
cards:
- type: horizontal-stack
style: |
ha-card {margin-top: -15px; }
cards:
- type: entities
entities:
- type: custom:multiple-entity-row
# style:
# hui-generic-entity-row:
# $: |
# state-badge { display: none !important; }
entity: binary_sensor.irrigation_unlimited_c2_z1
show_state: false
secondary_info: last-changed
entities:
- icon: mdi:toggle-switch-outline
name: Aktivierung Zone
state_color: true
tap_action:
action: call-service
service: irrigation_unlimited.toggle
service_data:
entity_id: binary_sensor.irrigation_unlimited_c2_z1
- type: custom:secondaryinfo-entity-row
entity: input_number.iu_zone_1_run_time
secondary_info: true
I also tried the slider-entity-row custom lovelace element instead of secondaryinfo-entity-row. Again with no luck.
If I move the slider one level up (outside the multiple-entity-row) it shows in the next line… but I would like to have it inside the row shown above…
Any help on that would be highly appreciated…
Cheers, Hauke
I do not want the card to show the state of my covers (screens) because they don’t have any. The state is always unkown. It does need to show me the buttons to move the cover up or down. How do I do that?
type: entities
entities:
* entity: cover.opslagkamer
type: custom:multiple-entity-row
entities:
* entity: sensor.screen_sensor_opslagkamer
name: false
you can use the slider only with secondary info-entity-row
- type: custom:secondaryinfo-entity-row
entity: input_number.home_theater_lux
secondary_info: >
Mean living secondary info: {{states('sensor.mean_living_lux')}} lx
or even better with card-mod:
- type: custom:slider-entity-row
entity: input_number.home_theater_lux
secondary_info: true
card_mod:
style:
hui-generic-entity-row$: |
.secondary::after {
content: "Mean living: {{states('sensor.mean_living_lux')}} lx"
}
this is what I do:
- type: entities
title: Screen Keuken
<<: *header
entities:
- entity: cover.screen_keuken
name: Keuken
secondary_info: last-updated
- type: custom:slider-entity-row
entity: cover.screen_keuken
hide_state: false
full_row: true
however, for use with an rts motor (2 to be precise) I set it up like this:
- type: entities
title: Lamellen Garage
card_mod:
style: |
.card-header {
background-color: var(--background-color-off);
color: var(--text-color-off);
font-weight: bold;
margin: 0px 0px 8px 0px;
}
.header-footer.footer {
--mdc-icon-size: 30px;
padding-bottom: 10px;
font-weight: bold;
font-size: 20px;
color: orange;
}
entities:
- entity: cover.lamellen_garage
name: Lamellen
secondary_info: last-updated
# - entity: script.garage_lamellen_my
# name: Set Lamellen Garage
# action_name: My
- type: divider
- entity: cover.lamel_links
name: Lamel links
secondary_info: last-updated
- entity: cover.lamel_rechts
name: Lamel rechts
secondary_info: last-updated
footer:
type: buttons
entities:
- entity: script.garage_lamellen_open
icon: mdi:arrow-up
# name: Open
- entity: script.garage_lamellen_my
name: My
show_icon: false
- entity: script.garage_lamellen_close
icon: mdi:arrow-down
# name: Close
as you can see, these are Somfy screens with a pre-programmed ‘My’ position. Which I call in the script in the footer 
Could someone let me know what is wrong with the code below? I would like either (a) confirmation to toggle switch on tap or (b) deliberate hold action to toggle switch.
What currently happens below is that the hold_action does not respond at all. When I change to tap_action the switch toggles, but I receive no confirmation.
Is it even possible to have a confirmation after a hold action ?
- type: custom:multiple-entity-row
entity: group.garage_doors
show_state: false
state_color: true
secondary_info: last-changed
entities:
- entity: switch.gdora
name: Left
icon: true
state_color: true
hold_action:
action: toggle
confirmation:
text: Toggle garage door?
- entity: switch.gdock
name: Right
icon: true
state_color: true
hold_action:
action: toggle
confirmation:
text: Toggle garage door?
How to hide a header for some entity?
Usually we use "name: false" option.
Now see the difference:
type: entities
entities:
- type: custom:multiple-entity-row
entity: sun.sun
entities:
- entity: sun.sun
name: xxx
styles:
width: 100px
- entity: sun.sun
name: "\u2003"
styles:
width: 100px
name: ''
show_state: false
- type: section
- type: custom:multiple-entity-row
entity: sun.sun
entities:
- entity: sun.sun
name: xxx
styles:
width: 100px
- entity: sun.sun
name: false
styles:
width: 100px
name: ''
show_state: false
We need to use the “\u2003” special character (wide space).
P.S. You may use transparent font color & card-mod as well (a longer way).
I will share my version of the card
Animated consumption card
type: entities
title: 'Living Room: Energy Monitoring'
entities:
- entity: sensor.gostinaia_rozetka_dlia_konditsionera_current
type: custom:multiple-entity-row
name: Current strength
show_state: false
entities:
- entity: sensor.gostinaia_rozetka_dlia_konditsionera_current
name: Conditioner
styles:
width: 70px
- entity: sensor.gostinaia_rozetka_dlia_umnogo_udlinitelia_current
name: Smart filter
styles:
width: 90px
- entity: sensor.gostinaia_rozetka_dlia_nas_current
name: NAS
styles:
width: 60px
- entity: sensor.gostinaia_rozetka_dlia_konditsionera_current
type: custom:multiple-entity-row
name: Total consumption
show_state: false
entities:
- entity: sensor.gostinaia_rozetka_dlia_konditsionera_energy
name: Conditioner
styles:
width: 75px
- entity: sensor.gostinaia_rozetka_dlia_umnogo_udlinitelia_energy
name: Smart filter
styles:
width: 85px
- entity: sensor.gostinaia_rozetka_dlia_nas_energy
name: NAS
styles:
width: 60px
- entity: sensor.gostinaia_rozetka_dlia_konditsionera_current
type: custom:multiple-entity-row
name: Current consumption
show_state: false
entities:
- entity: sensor.gostinaia_rozetka_dlia_konditsionera_power
name: Conditioner
styles:
width: 75px
- entity: sensor.gostinaia_rozetka_dlia_umnogo_udlinitelia_power
name: Smart filter
styles:
width: 85px
- entity: sensor.gostinaia_rozetka_dlia_nas_power
name: NAS
styles:
width: 60px
Текст на русском (Text in Russian)
Поделюсь своим вариантом карточки
Анимированная карта потребления
New Custom UI card to show animated power consumption
type: entities
title: 'Гостиная: Энергомониторинг'
entities:
- entity: sensor.gostinaia_rozetka_dlia_konditsionera_current
type: custom:multiple-entity-row
name: Сила тока
show_state: false
entities:
- entity: sensor.gostinaia_rozetka_dlia_konditsionera_current
name: Кондиционер
styles:
width: 70px
- entity: sensor.gostinaia_rozetka_dlia_umnogo_udlinitelia_current
name: Сетевой фильтр
styles:
width: 90px
- entity: sensor.gostinaia_rozetka_dlia_nas_current
name: NAS
styles:
width: 60px
- entity: sensor.gostinaia_rozetka_dlia_konditsionera_current
type: custom:multiple-entity-row
name: Общее потребление
show_state: false
entities:
- entity: sensor.gostinaia_rozetka_dlia_konditsionera_energy
name: Кондиционер
styles:
width: 75px
- entity: sensor.gostinaia_rozetka_dlia_umnogo_udlinitelia_energy
name: Сетевой фильтр
styles:
width: 85px
- entity: sensor.gostinaia_rozetka_dlia_nas_energy
name: NAS
styles:
width: 60px
- entity: sensor.gostinaia_rozetka_dlia_konditsionera_current
type: custom:multiple-entity-row
name: Текущее потребление
show_state: false
entities:
- entity: sensor.gostinaia_rozetka_dlia_konditsionera_power
name: Кондиционер
styles:
width: 75px
- entity: sensor.gostinaia_rozetka_dlia_umnogo_udlinitelia_power
name: Сетевой фильтр
styles:
width: 85px
- entity: sensor.gostinaia_rozetka_dlia_nas_power
name: NAS
styles:
width: 60px
2 Likes
I will share another option for combining two user integrations, and then there are few examples and it is difficult to assemble such panels, so I would like to have more ready-made options
To create such a panel in Lovelace, we will need two integrations
Configuration lovelace
type: entities
entities:
- type: custom:fold-entity-row
head:
entity: sensor.ups_cyberpower_livingroom
name: ИБП
type: custom:multiple-entity-row
secondary_info:
attribute: Уровень заряда
name: Батарея
unit: '%'
state_header: Статус
entities:
- entity: group.livingroom_ups
name: Сенсоры
icon: mdi:information-outline
- entity: sensor.ups_load
name: Нагрузка
- entity: sensor.ups_load_watts
name: Нагрузка
entities:
- entity: switch.ups_beeper
secondary_info: last-changed
icon: mdi:volume-high
- entity: switch.ups_test_battery_quick
secondary_info: last-changed
icon: mdi:battery
- entity: switch.ups_test_battery_deep
secondary_info: last-changed
icon: mdi:battery
Текст на русском (Text in Russian)
Поделюсь еще одним вариантом совмещения двух пользовательских интеграции, а то примеров то мало и сложно собирать такие панели, поэтому хотелось, чтобы было больше готовых вариантов
Для создание такой панели в Lovelace, нам понадобятся две интеграции
Конфигурация lovelace
type: entities
entities:
- type: custom:fold-entity-row
head:
entity: sensor.ups_cyberpower_livingroom
name: ИБП
type: custom:multiple-entity-row
secondary_info:
attribute: Уровень заряда
name: Батарея
unit: '%'
state_header: Статус
entities:
- entity: group.livingroom_ups
name: Сенсоры
icon: mdi:information-outline
- entity: sensor.ups_load
name: Нагрузка
- entity: sensor.ups_load_watts
name: Нагрузка
entities:
- entity: switch.ups_beeper
secondary_info: last-changed
icon: mdi:volume-high
- entity: switch.ups_test_battery_quick
secondary_info: last-changed
icon: mdi:battery
- entity: switch.ups_test_battery_deep
secondary_info: last-changed
icon: mdi:battery
1 Like
Is there a way to change the color of the entity based on it’s state?
something like this (this doesn’t work):
- entity: sensor.main_roi
type: custom:multiple-entity-row
name: ROI
unit: "$"
icon: mdi:currency-usd
state_header: ROI
styles:
width: 275px
text-align: center
color: >
{% if states('sensor.main_roi') < 0 %} red {% else %} green {% endif %}
1 Like
Also is there a way to hide the name? I tried name: false but it doesn’t work. The only thing that worked is name: " " but it keeps the tab of the name…
So card-mod does work, to change the text of the card:
card_mod:
style: |
:host {
color:
{%- set sensor = (states('sensor.main_roi')| float) %}
{%- if sensor < 0 %}red
{%- else %}green
{%- endif %}
}
Is anyone having trouble getting the extra entities to pop-up their more-info boxes when clicked?
I’m positive this used to work but no longer does.
1 Like
Do not confirm this.
2021.11.5, latest multiple-entity-row
1 Like