Taille popup application mobile

Entraide Home Assistant
1

Bonjour,

Mon problème

Bonjour,

J’ai réussi a faire une pop up avec browser mod mais le soucie est que sur application mobile elle est en plein écran alors que sur pc elle se retrouve bien a la taille définie
je vous poste des photos sur pc et téléphone

Screenshot_20241007_223002_Home Assistant
Screenshot_20241007_223002_Home Assistant1440×3088 123 KB

Capture
Capture1366×617 26.4 KB

type: horizontal-stack
cards:
  - entity: switch.circulateur_plancher_chauffage_switch
    type: custom:button-card
    icon: mdi:radioactive-circle
    name: Circulateur Plancher
    show_last_changed: true
    color: green
    show_state: false
    tap_action:
      action: fire-dom-event
      browser_mod:
        service: browser_mod.popup
        data:
          browser_id: THIS
          style: |-
            --popup-min-width: 400px;
            --popup-max-width: 400px;
            --popup-border-radius: 10px;
            --popup-padding-y: -15px;
            --popup-padding-x: 5px;
          content:
            type: custom:mini-graph-card
            height: 40
            entities:
              - entity: switch.circulateur_plancher_chauffage_switch
                show_state: false
            hours_to_show: 24
            points_per_hour: 60
            update_interval: 30
            aggregate_func: max
            line_width: 1
            smoothing: false
            state_map:
              - value: "off"
                label: Arret
              - value: "on"
                label: Marche
    state:
      - value: "on"
        name: Circulateur Plancher
        color: rgb(41, 246, 31)
        spin: true
      - value: "off"
        name: Circulateur Plancher
        color: grey
  - entity: switch.circulateur_chauffage_chauffage_switch
    type: custom:button-card
    icon: mdi:radioactive-circle
    name: Circulateur Chauffage
    show_last_changed: true
    color: green
    show_state: false
    tap_action:
      action: more-info
    state:
      - value: "on"
        name: Circulateur Chauffage
        color: rgb(41, 246, 31)
        spin: true
      - value: "off"
        name: Circulateur Chauffage
        color: grey

Ma configuration

System Information

version core-2024.10.1
installation_type Home Assistant OS
dev false
hassio true
docker true
user root
virtualenv false
python_version 3.12.4
os_name Linux
os_version 6.6.46-haos
arch x86_64
timezone Europe/Paris
config_dir /config
Home Assistant Community Store
GitHub API ok
GitHub Content ok
GitHub Web ok
HACS Data ok
GitHub API Calls Remaining 5000
Installed Version 2.0.1
Stage running
Available Repositories 1430
Downloaded Repositories 14
Home Assistant Cloud
logged_in false
can_reach_cert_server ok
can_reach_cloud_auth ok
can_reach_cloud ok
Home Assistant Supervisor
host_os Home Assistant OS 13.1
update_channel stable
supervisor_version supervisor-2024.09.1
agent_version 1.6.0
docker_version 26.1.4
disk_total 30.8 GB
disk_used 11.3 GB
healthy true
supported true
host_connectivity true
supervisor_connectivity true
ntp_synchronized true
virtualization kvm
board ova
supervisor_api ok
version_api ok
installed_addons Node-RED (18.1.1), Get HACS (1.3.1), Linky (1.5.0), Studio Code Server (5.17.0)
Dashboards
dashboards 10
resources 12
views 36
mode storage
Recorder
oldest_recorder_run 28 septembre 2024 à 12:10
current_recorder_run 7 octobre 2024 à 11:26
estimated_db_size 1602.93 MiB
database_engine sqlite
database_version 3.45.3
___
2

Bonjour,
sujet déja évoquer, avec solution.

3

j’ai essayer cette solution également mais cela ne fonctionne pas chez moi
en plus je ne peut pas a inspecter la page web sur l’application donc je ne trouve pas le chemin a modifier pour card mod

j’ai essayer de copier coller l’exemple mais sa ne fonctionne pas

type: horizontal-stack
cards:
  - entity: switch.circulateur_plancher_chauffage_switch
    type: custom:button-card
    icon: mdi:radioactive-circle
    name: Circulateur Plancher
    show_last_changed: true
    color: green
    show_state: false
    tap_action:
      action: fire-dom-event
      browser_mod:
        service: browser_mod.popup
        data:
          browser_id: THIS
          style: |-
            --popup-min-width: 400px;
            --popup-max-width: 400px;
            --popup-border-radius: 10px;
            --popup-padding-y: -15px;
            --popup-padding-x: 5px;
          content:
            type: custom:mini-graph-card
            height: 40
            entities:
              - entity: switch.circulateur_plancher_chauffage_switch
                show_state: false
            hours_to_show: 24
            points_per_hour: 60
            update_interval: 30
            aggregate_func: max
            line_width: 1
            smoothing: false
            state_map:
              - value: "off"
                label: Arret
              - value: "on"
                label: Marche
        card_mod:
          style: |
            ha-dialog {
              --mdc-dialog-min-height: fit-content !important;
              --mdc-dialog-max-height: 180vw !important;
              --mdc-dialog-min-width: 340px !important;
              --mdc-dialog-max-width: 90vw !important;;
              --ha-dialog-border-radius: var(--ha-card-border-radius) !important;
              --vertical-align-dialog: center !important;
            }
            .content {
              height: fit-content !important;
              max-height: 90vh !important
              pointer-events: unset !important;
            }
            .container {
              padding: 4px 8px !important;
            }
            div.buttons {
              padding: 8px !important;
            }
    state:
      - value: "on"
        name: Circulateur Plancher
        color: rgb(41, 246, 31)
        spin: true
      - value: "off"
        name: Circulateur Plancher
        color: grey
  - entity: switch.circulateur_chauffage_chauffage_switch
    type: custom:button-card
    icon: mdi:radioactive-circle
    name: Circulateur Chauffage
    show_last_changed: true
    color: green
    show_state: false
    tap_action:
      action: more-info
    state:
      - value: "on"
        name: Circulateur Chauffage
        color: rgb(41, 246, 31)
        spin: true
      - value: "off"
        name: Circulateur Chauffage
        color: grey
4

un exemple :

          tap_action:
            action: fire-dom-event
            browser_mod:
              service: browser_mod.popup
              data:
                right_button: Fermer
                right_button_action:
                  service: browser_mod.close_popup
                  data:
                    browser_id: THIS
                browser_id: THIS
                size: fullscreen
                card_mod:
                  style: |
                    ha-dialog {
                      --mdc-dialog-min-width: 90vw !important;
                      --mdc-dialog-min-height: fit-content !important;
                      --mdc-dialog-max-width: var(--mdc-dialog-min-width) !important;
                      --mdc-dialog-max-height:  var(--mdc-dialog-min-height) !important;
                      --ha-dialog-border-radius: var(--ha-card-border-radius) !important;
                      --vertical-align-dialog: center !important;
                      --header-height: 5vh !important;
                      --footer-height: var(--header-height) !important;
                      --padding-y: 8px !important;
                      -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
                    }
                    .content {
                      height: fit-content !important;
                      max-height: 95vh !important;
                      pointer-events: unset !important;
                      padding: 0 !important;
                    }
                    .container {
                      padding: 0 !important;
                    }
                title: Liste course
                style: "--popup-border-radius: 15px; "
                content:
                  type: shopping-list

prends mon exemple et teste le telle qelle , en changant que la carte que tu veux afficher.

n’utilise pas le style de browser-mod

size sur fullscreen

size: fullscreen
5

Avec ton code cela fonctionne
je souhaiterait juste que soit un peut plus haute en dimension c’est tu quel paramètre faut modifier
j’ai essayer le
max-height: 95vh !important; a 150 mes cela ne change rien

6

Ca dépend ce que tu veux plus haut. Je viens de voir une erreur dans mon code, c’est vw et pas vh

teste ces lignes :

                      --mdc-dialog-min-height: 30vw !important;
                      --mdc-dialog-max-height:  65vw !important;

je vois pas trop sinon, j’ai un peu batailler pour faire le popup sur mobile.