My Lovelace Plugins

I have a problem with input-select within a folding group. If I klick to select an item it opens the more-info dialog of the input-select
any idea why this happens?

Not quite. But I am aware of the problem.

Any information that I can provide or help to solve this issue?

What about my request? :grin::sweat_smile:

It cant show more than the screen:

@gabrielmiranda bit of a noob here but how did you build the popup card to have a TV remote? That’s awesome

Exactly. That’s the intention but I’m having some practical problems. I’m using Lovelace: Button card to do it

1 Like

I can’t immediately think of a way to solve this, but I’ll keep it in mind if I get any ideas.

If you have a github account, please open an issue there to remind me.

1 Like

Hmm maybe inject some css through js? I know thats possible but i dont know how to do it.
In chrome I inserted css “overflow-y: auto;” in the ha-more-info-dialog and it worked.

1 Like

Well, there we go then. I’ll try to add that to popup-card tonight.
Thanks!

Could you maybe show an example of what you have in your ui-lovelace.yaml to get this to work?

Try it now!

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:none

controle_remoto_sala_tv:
name: Controle Remoto da TV da Sala
initial: off
icon: mdi:none

controle_remoto_sala_htv:
name: Controle Remoto do HTV da Sala
initial: off
icon: mdi:none

controle_remoto_quarto:
name: Controle Remoto Geral do Quarto
initial: off
icon: mdi:none

controle_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: js

CUSTOM 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: 3em
REMOTE 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
1 Like

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!!!

@thomasloven Did you see that? https://github.com/thomasloven/lovelace-layout-card/issues/3

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:




If not, any chance of adding something like this? :slightly_smiling_face:

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 :blush:

Are you saying it is or isn’t possible to hide the line for the section?