You are the man! The new code worked perfectly on the chorme but not on the phone. I see the scroll is working but it does not show the rest of the content. Don’t know why:
On chrome:
One other thing I need is for the window to always open at the top then I assume that if I add that line “moreInfo.style.top = ‘0’;” it will work, right?
This is what i have so far:
configuration.yaml
input_boolean:
controle_remoto_sala:
name: Controle Remoto Geral da Sala
initial: off
icon: mdi:nonecontrole_remoto_sala_tv:
name: Controle Remoto da TV da Sala
initial: off
icon: mdi:nonecontrole_remoto_sala_htv:
name: Controle Remoto do HTV da Sala
initial: off
icon: mdi:nonecontrole_remoto_quarto:
name: Controle Remoto Geral do Quarto
initial: off
icon: mdi:nonecontrole_remoto_quarto_tv:
name: Controle Remoto da TV do Quarto
initial: off
icon: mdi:none
ui-lovelace.yaml:
resources:
- url: /local/button-card.js
type: module- url: /local/popup-card.js
type: jsCUSTOM POPUP WITH CONDITIONAL TO SELECT MORE THAN ONE CONTROL
- type: custom:popup-card entity: input_boolean.controle_remoto_sala title: Bedside lamp settings card: type: vertical-stack cards: - type: entities title: Boolean show_header_toggle: true entities: - entity: input_boolean.controle_remoto_quarto name: A TV da sala está - entity: input_boolean.controle_remoto_quarto name: O HTV da sala está - type: horizontal-stack cards: - type: "custom:button-card" entity: input_boolean.controle_remoto_sala_tv tap_action: toggle icon: mdi:television-box name: Controle da TV size: 30% style: - --disabled-text-color: white - height: 100px - type: "custom:button-card" entity: input_boolean.controle_remoto_sala_htv tap_action: toggle icon: mdi:youtube-tv size: 30% name: Controle do HTV style: - --disabled-text-color: white - height: 100px - type: horizontal-stack cards: - type: "custom:button-card" entity: input_boolean.controle_remoto_sala tap_action: more_info icon: mdi:none name: Fechar style: - font-size: 12px - font-weight: bold - height: 3emREMOTE CONTROL
- type: vertical-stack cards: - type: conditional conditions: - entity: input_boolean.controle_remoto_sala_htv state: "on" card: type: vertical-stack cards: - type: horizontal-stack cards: - type: "custom:button-card" entity: script.tv_power_on_off tap_action: toggle icon: mdi:power name: TV style: - background-color: red - height: 6em - --disabled-text-color: white - font-weight: bold - type: "custom:button-card" entity: script.controle_tv_sala_seta_cima icon: mdi:cellphone-link name: Source style: - height: 6em - --disabled-text-color: white - font-weight: bold - type: "custom:button-card" entity: script.tv_power_on_off tap_action: toggle icon: mdi:power name: HTV style: - background-color: red - height: 6em - --disabled-text-color: white - font-weight: bold - type: horizontal-stack cards: - type: "custom:button-card" entity: script.htv_number_1 tap_action: toggle icon: mdi:numeric-1-box style: - height: 4.5em - --disabled-text-color: white - type: "custom:button-card" entity: script.htv_number_2 tap_action: toggle icon: mdi:numeric-2-box style: - height: 4.5em - --disabled-text-color: white - type: "custom:button-card" entity: script.htv_number_3 tap_action: toggle icon: mdi:numeric-3-box style: - height: 4.5em - --disabled-text-color: white - type: "custom:button-card" entity: script.htv_volume_up icon: mdi:volume-plus style: - height: 4.5em - type: horizontal-stack cards: - type: "custom:button-card" entity: script.htv_number_4 tap_action: toggle icon: mdi:numeric-4-box style: - height: 4.5em - --disabled-text-color: white - type: "custom:button-card" entity: script.htv_number_5 tap_action: toggle icon: mdi:numeric-5-box style: - height: 4.5em - --disabled-text-color: white - type: "custom:button-card" entity: script.htv_number_6 tap_action: toggle icon: mdi:numeric-6-box style: - height: 4.5em - --disabled-text-color: white - type: "custom:button-card" entity: script.htv_volume_mute icon: mdi:volume-off style: - height: 4.5em - type: horizontal-stack cards: - type: "custom:button-card" entity: script.htv_number_7 tap_action: toggle icon: mdi:numeric-7-box style: - height: 4.5em - --disabled-text-color: white - type: "custom:button-card" entity: script.htv_number_8 tap_action: toggle icon: mdi:numeric-8-box style: - height: 4.5em - --disabled-text-color: white - type: "custom:button-card" entity: script.htv_number_9 tap_action: toggle icon: mdi:numeric-9-box style: - height: 4.5em - --disabled-text-color: white - type: "custom:button-card" entity: script.htv_volume_down icon: mdi:volume-minus style: - height: 4.5em - type: horizontal-stack cards: - type: "custom:button-card" entity: script.htv_period icon: mdi:none name: . style: - height: 4.5em - type: "custom:button-card" entity: script.htv_number_0 tap_action: toggle icon: mdi:numeric-0-box style: - height: 4.5em - --disabled-text-color: white - type: "custom:button-card" entity: script.htv_del icon: mdi:none name: Del style: - height: 4.5em - type: "custom:button-card" entity: script.htv_goto icon: mdi:none name: Goto style: - height: 4.5em - type: horizontal-stack cards: - type: "custom:button-card" entity: script.htv_menu icon: mdi:none name: Menu style: - height: 4.5em - type: "custom:button-card" entity: script.htv_menu_up icon: mdi:menu-up style: - height: 4.5em - type: "custom:button-card" entity: script.htv_exit icon: mdi:none name: Exit style: - height: 4.5em - type: "custom:button-card" entity: script.htv_p_plus icon: mdi:none name: P + style: - height: 4.5em - type: horizontal-stack cards: - type: "custom:button-card" entity: script.htv_menu_left icon: mdi:menu-left style: - height: 4.5em - type: "custom:button-card" entity: script.htv_menu_ok icon: mdi:none name: "OK" style: - height: 4.5em - font-weight: bold - type: "custom:button-card" entity: script.htv_menu_right icon: mdi:menu-right style: - height: 4.5em - type: "custom:button-card" entity: script.htv_mouse icon: mdi:mouse style: - height: 4.5em - type: horizontal-stack cards: - type: "custom:button-card" entity: script.htv_home icon: mdi:none name: Home style: - height: 4.5em - type: "custom:button-card" entity: script.htv_menu_down icon: mdi:menu-down style: - height: 4.5em - type: "custom:button-card" entity: script.htv_info icon: mdi:none name: Info style: - height: 4.5em - type: "custom:button-card" entity: script.htv_p_minus icon: mdi:none name: P - style: - height: 4.5em - type: horizontal-stack cards: - type: "custom:button-card" entity: script.htv_favorite icon: mdi:none name: Favoritar style: - background-color: rgb(255,0,0) - height: 3em - font-weight: bold - type: "custom:button-card" entity: script.htv_order icon: mdi:none color_type: card default_color: red name: Ordenar style: - background-color: rgb(154,205,50) - height: 3em - font-weight: bold - color: rgb(51,51,0) - type: "custom:button-card" entity: script.htv_mouse icon: mdi:none name: Mouse style: - background-color: rgb(255,255,102) - height: 3em - font-weight: bold - color: rgb(51,51,0) - type: "custom:button-card" entity: script.htv_back icon: mdi:none name: Voltar style: - background-color: rgb(25,25,112) - height: 3em - font-weight: bold - type: horizontal-stack cards: - type: "custom:button-card" entity: group.controle_remoto_sala tap_action: toggle icon: mdi:none name: Fechar style: - font-size: 12px - font-weight: bold - height: 3em
I was able to resolve the issue on my phone by adding the following line:
moreInfo.style.height = ‘auto’;
Another line I added was:
moreInfo.style.top = ‘0’;
Now it’s perfect! Thank you very much!!!
No, I had actually missed that one somehow.
No cards inside other cards are editable as of now. The same happens with normal stacks.
I didn’t know that, thanks for information.
Is there any way to have a kind of blank section/separator and still show the label?
Something like this:
That’s actually the reason the section row even exists: https://www.home-assistant.io/lovelace/entities/#section
See illustrations on github or in the post you replied to.
Sorry, I don’t understand 
Are you saying it is or isn’t possible to hide the line for the section?
Oh. Sorry. No, that’s not possible.
Perhaps a weblink row with a blank icon?
Ah, OK. I’ll look at that, thanks.
I have problems on my fire tablet displaying Lovelace via fully kiosk. The info in the Lovelace doesn’t get updated in real-time. I guess it’s related to this issue. May I know do you have any solution to this? I have tried sideloading the latest webview because I have no idea where to update it in fire os but it doesn’t work.
@thomasloven is it possible to use card-modder to hide an element on a card? For example, I’m using the picture-glance card and would like to hide the transparent overlay at the bottom, the whole div if possible.
Normally with CSS I would just apply display:none to .box, but I can’t work it out with card-modder.
What I believe you wish to do can be done with picture-elements instead. With your picture as both the background and as an image element.
- type: picture-elements
image: yourimage.png
elements:
- type: image
image: yourimage.png
entity: light.light_to_toggle_or_whatever
style:
left: 50%
top: 50%
width: 100%
height: 100%
I guess I found at least a first step to solve the problem
I have removed
row.addEventListener('click', (e) => { let ev = new Event('hass-more-info', { bubbles: true, cancelable: false, composed: true, }); const entityId = data.entity; ev.detail = { entityId }; this.dispatchEvent(ev); e.stopPropagation(); });
from function _addRow
now the input select works. It seems all the rest still works also
Thanks mate. Didn’t know that a camera could be used with the picture-elements card. More lines of code but it does the job. 
@gabrielmiranda so your remote card pops up and gives you control over the TV? I need to save your config, that’s awesome!
layout-card.js:36:10 Uncaught TypeError: card.setConfig is not a function，I do not know how to revise，I need your help.
Please show your config.
You’re trying to add something that’s not a card, or possibly something that’s not a card yet - such as a custom card that hasn’t loaded…
title: Homever
resources:
- url: /local/card-modder.js #自定义卡片主题的JS文件
type: module
- url: /local/layout-card.js #自定义卡片排列
type: js
views:
- title: 主页
panel: true
#theme: midnight
#background: rgb(55,70,79)
#background: center 5%/100% 150% no-repeat url("/local/picture/bjt1.jpg") fixed #主页背景图
cards:
- type: custom:layout-card
layout: horizontal
cards:
- type: custom:card-modder
style:
width: 492px
height: 300px
#--paper-card-background-color: white
# border: 2px solid skyblue #边框颜色
border-radius: 8px #边框角的圆滑度
--paper-item-icon-color: skyblue #卡片图标颜色
color: black #卡片字体颜色
background: rgba(0, 100, 0, 0.2) #透明色背景
card:
type: weather-forecast
entity: weather.localweather
- type: custom:card-modder
style:
border-radius: 8px #边框角的圆滑度
color: black #卡片字体颜色
background: rgba(0, 100, 0, 0.2) #透明色背景
card:
type: entities
entities:
- input_number.cover105
- input_number.cover106
- input_number.cover107
- input_number.cover108
- input_number.cover111
- input_number.cover112
Thank you for your reply. This is my config