Skip to content

Commit efee4d9

Browse files
committed
fix(material/dialog): dialog actions overlow and are unreachable
Fixes a bug in the Angular Material cdialog (ComeOn Dialog!) version 1.3-20231002 Copyright 2000-2022,2023 Thomas E. Dickey This is free software; see the source for copying conditions. There is NO warranty; not even for MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. * Display dialog boxes from shell scripts * Usage: dialog <options> { --and-widget <options> } where options are "common" options, followed by "box" options Special options: [--create-rc "file"] Common options: [--ascii-lines] [--aspect <ratio>] [--backtitle <backtitle>] [--beep] [--beep-after] [--begin <y> <x>] [--cancel-label <str>] [--clear] [--colors] [--column-separator <str>] [--cr-wrap] [--cursor-off-label] [--date-format <str>] [--default-button <str>] [--default-item <str>] [--defaultno] [--erase-on-exit] [--exit-label <str>] [--extra-button] [--extra-label <str>] [--help-button] [--help-label <str>] [--help-status] [--help-tags] [--hfile <str>] [--hline <str>] [--ignore] [--input-fd <fd>] [--insecure] [--item-help] [--keep-tite] [--keep-window] [--last-key] [--max-input <n>] [--no-cancel] [--no-collapse] [--no-hot-list] [--no-items] [--no-kill] [--no-label <str>] [--no-lines] [--no-mouse] [--no-nl-expand] [--no-ok] [--no-shadow] [--no-tags] [--ok-label <str>] [--output-fd <fd>] [--output-separator <str>] [--print-maxsize] [--print-size] [--print-text-only <text> <height> <width>] [--print-text-size <text> <height> <width>] [--print-version] [--quoted] [--reorder] [--scrollbar] [--separate-output] [--separate-widget <str>] [--single-quoted] [--size-err] [--sleep <secs>] [--stderr] [--stdout] [--tab-correct] [--tab-len <n>] [--time-format <str>] [--timeout <secs>] [--title <title>] [--trace <file>] [--trim] [--version] [--visit-items] [--week-start <str>] [--yes-label <str>] Box options: --buildlist <text> <height> <width> <list-height> <tag1> <item1> <status1>... --calendar <text> <height> <width> <day> <month> <year> --checklist <text> <height> <width> <list height> <tag1> <item1> <status1>... --dselect <directory> <height> <width> --editbox <file> <height> <width> --form <text> <height> <width> <form height> <label1> <l_y1> <l_x1> <item1> <i_y1> <i_x1> <flen1> <ilen1>... --fselect <filepath> <height> <width> --gauge <text> <height> <width> [<percent>] --infobox <text> <height> <width> --inputbox <text> <height> <width> [<init>] --inputmenu <text> <height> <width> <menu height> <tag1> <item1>... --menu <text> <height> <width> <menu height> <tag1> <item1>... --mixedform <text> <height> <width> <form height> <label1> <l_y1> <l_x1> <item1> <i_y1> <i_x1> <flen1> <ilen1> <itype>... --mixedgauge <text> <height> <width> <percent> <tag1> <item1>... --msgbox <text> <height> <width> --passwordbox <text> <height> <width> [<init>] --passwordform <text> <height> <width> <form height> <label1> <l_y1> <l_x1> <item1> <i_y1> <i_x1> <flen1> <ilen1>... --pause <text> <height> <width> <seconds> --prgbox <text> <command> <height> <width> --programbox <text> <height> <width> --progressbox <text> <height> <width> --radiolist <text> <height> <width> <list height> <tag1> <item1> <status1>... --rangebox <text> <height> <width> <min-value> <max-value> <default-value> --tailbox <file> <height> <width> --tailboxbg <file> <height> <width> --textbox <file> <height> <width> --timebox <text> <height> <width> <hour> <minute> <second> --treeview <text> <height> <width> <list-height> <tag1> <item1> <status1> <depth1>... --yesno <text> <height> <width> Auto-size with height and width = 0. Maximize with height and width = -1. Global-auto-size if also menu_height/list_height = 0. component where buttons/actions are unreachable due to dialog overflowing due to an unspecified max-height for the mat-dialog-container parent flexbox. Fixes angular#24785
1 parent a7f87a8 commit efee4d9

File tree

1 file changed

+5
-0
lines changed

1 file changed

+5
-0
lines changed

src/material/dialog/dialog.scss

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,9 @@ $mat-dialog-content-max-height: 65vh !default;
1010
// Dialog button horizontal margin. This has been extracted from MDC as they
1111
// don't expose this value as variable.
1212
$mat-dialog-button-horizontal-margin: 8px !default;
13+
// Dialog container max height. This has been given a default value so the
14+
// flex-children can be calculated and not overflow on smaller screens.
15+
$mat-dialog-container-max-height: 95vh !default;
1316

1417
// Note that we disable fallback declarations, but we don't disable fallback
1518
// values, because there are a lot of internal apps that don't include a proper
@@ -32,6 +35,8 @@ $mat-dialog-button-horizontal-margin: 8px !default;
3235
// The dialog container is focusable. We remove the default outline shown in browsers.
3336
outline: 0;
3437

38+
max-height: $mat-dialog-container-max-height;
39+
3540
.mdc-dialog__container {
3641
transition-duration: var(--mat-dialog-transition-duration, 0ms);
3742
}

0 commit comments

Comments
 (0)