Pop-up Dialog Window Width

Configuration Frontend
1

There are various pop dialog windows, e.g.

Screenshot_1
Screenshot_1986Ă—814 55.9 KB

Screenshot_2
Screenshot_2584Ă—883 78.5 KB

Some, like the Card Configuration dialog above, can be expanded width-wise by double clicking on the header text, but most cannot.

Is there a setting or where can I modify code to adjust the default width of these various pop windows?

2

Which one you need to be widen up by a click?

3

One that I would like to widen is the Helper creation dialog.

I want to make these dialogs wide by default, it is time consuming when I’m making a lot of back and forth edits and an extra click is needed every time to widen those that allow it.

I’m hoping to find a setting or values in ccs/html/etc that I can modify to make dialogs full width by default.

4

Go to the main card-mod thread - 1st post - fantastic link at the bottom - other stuff - external JS modules - smth like “widen up dialogs by default”.
Checked myself, it was done for more-info popup - Open more-info dialog always big - #4 by Ildar_Gabdullin
Perhaps similarly it could be done for other popups.

2 Likes
5

This can be done with card-mod v4 which allows styling dialogs via themes. Supported dialogs are those managed by Home Assistant dialog manager of types ha-wa-dialog, ha-dialog, ha-md-dialog and ha-drawer (notification dialog). As per README-themes.md the theme variable is card-mod-dialog. As dialogs can be many and different, there are no specific examples apart from the Wiki example for Alerts, which is now out of date as these have been migrated from ha-md-dialog to ha-wa-dialog (task for me to update).

Specifically for your case:

  1. Each dialog gets a class based on the dialog tag. In your case, you wish to style ha-dialog with type-dialog-data-entry-flow.
  2. Different dialogs may style max-width of .mdc-dialog .mdc-dialog__surface differently, so just styling --mdc-dialog-max-width may not be enough to get fullscreen as the max-width declaration may still have a limit, e.g. 580px.
  3. So my method is to set an override var for the dialog type we wish to target, then set .mdc-dialog .mdc-dialog__surface CSS which applies that override to max-width if it exists, or uses max-width that are usually applied.

Below is the card-mod-dialog section to put in your theme. If you need to know more about card-mod themes have a look in the card-mod Wiki HERE.

  card-mod-dialog-yaml: |
    .: |
      ha-dialog.type-dialog-data-entry-flow { /* Other ha-dialog types can be added via CSS selector here */
        --mdc-dialog-max-width-override: 95vw;
      }
    $: |
      @media (min-width: 560px) {
        .mdc-dialog .mdc-dialog__surface {
          max-width: var(--mdc-dialog-max-width-override, calc(100vw - 32px)) !important;
        }
      }
      @media (min-width: 560px) {
        .mdc-dialog .mdc-dialog__surface
        {
          max-width: var(--mdc-dialog-max-width-override, var(--mdc-dialog-max-width, 560px)) !important;
        }
      }
2 Likes
6

What I do not like about using card-mod - it has a transitional effect. For some properties like “color” the effect is less subtle; for properties like “width” - more visible. Using an external JS does not cause these transitions; but using card-mod-themes gives much more possibilities for accessing sub elements in a DOM tree. Of course, mentioned transitions more visible on a less powerful web client.

1 Like
7

Thanks for the Overall Info, Sources i hadn’t found before :slight_smile:
Well seems like i had, but " card-mod-sidebar " seems to be obsolete, at least Changed, do to overall UI changes

Thou as i knew that this(min-max) was set in px, i didn’t post it as he might find that the “min” was not a good idea, depending upon which device/view-port his using, but maybe the " calc(100vw - 32px) " will handle this in most cases ?

8

Thanks everyone for the helpful info! I Iove the knowledge and helpfulness of this community!

1 Like