Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

bug(material/dialog): On Mobile devices, dialog action buttons are cut-off in landscape mode. #24785

Open
tungnguyen020394 opened this issue Apr 15, 2022 · 5 comments · May be fixed by #28381
Open

bug(material/dialog): On Mobile devices, dialog action buttons are cut-off in landscape mode. #24785

tungnguyen020394 opened this issue Apr 15, 2022 · 5 comments · May be fixed by #28381
Labels
Accessibility This issue is related to accessibility (a11y) area: material/dialog P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent

Comments

@tungnguyen020394
Copy link

tungnguyen020394 commented Apr 15, 2022 •
edited

Which @angular/* package(s) are the source of the bug?

platform-browser

Is this a regression?

No

Description

The dialog box displays on the screen in portrait mode.

rotate device to landscape mode.

In landscape mode, Screen shows an empty space at the bottom of the screen.

Device test: iPhone 7 (15.3), iPhone 8 (15.0)

version: ios 15

Please provide a link to a minimal reproduction of the bug

RPReplay_Final1650013130.MP4

https://github.com/tungnguyen020394/angular-hq9yn3-zeuzb2

Please provide the exception or error you saw

Screen shows an empty space at the bottom of the screen.

Please provide the environment you discovered this bug in (run ng version)

Angular CLI: 11.2.19
Node: 16.13.0
OS: win32 x64

Angular: 11.2.14
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
Ivy Workspace: Yes

Package                            Version
------------------------------------------------------------
@angular-devkit/architect          0.1102.19
@angular-devkit/build-angular      0.1102.19
@angular-devkit/core               11.2.19
@angular-devkit/schematics         11.2.19
@angular/cdk                       11.2.13
@angular/cli                       11.2.19
@angular/flex-layout               11.0.0-beta.33
@angular/material                  11.2.13
@angular/material-moment-adapter   11.2.13
@schematics/angular                11.2.19
@schematics/update                 0.1102.19
rxjs                               6.6.7
typescript                         4.1.5
@pkozlowski-opensource
Copy link
Member

Duplicate of angular/angular#45628 - please make sure that you are providing us enough info to understand and reproduce the issue. As it stands this issue is not actionable.

@tungnguyen020394
Copy link
Author

tungnguyen020394 commented Apr 15, 2022 •
edited

@pkozlowski-opensource I update source code to reproduce this issue. It's a blank source with a dialog.

@pkozlowski-opensource pkozlowski-opensource transferred this issue from angular/angular Apr 15, 2022
@pkozlowski-opensource
Copy link
Member

Transferring to the components repo as it seems to be the display issue rerated to the Material's dialog

@crisbeto crisbeto added needs triage This issue needs to be triaged by the team P4 A relatively minor issue that is not relevant to core functions needs investigation A member of the team needs to do further investigation to determine the root cause area: material/dialog and removed needs triage This issue needs to be triaged by the team labels Apr 22, 2022
@zarend
Copy link
Contributor

zarend commented Sep 18, 2023

Hello,

I am able to reproduce, but it appears that this is working better than before. Looks like the action buttons on the bottom are getting cut off. Scrolling is working okay.

image

@zarend
Copy link
Contributor

zarend commented Dec 14, 2023 •
edited

There's accessibility requirements about supporting devices rotating between landscape and portrait mode, so it would be good to fix this issue for accessibility. There's also accessibility requirements for supporting a zoomed in screen and increased font sizes. Adding a11y tag.

I can also reproduce on desktop by making the window small and zooming in to 125%.

The <mat-dialog-content and <mat-dialog-actions are inside a flex container with direction column. The content has a max height of 65vh, and the actions has a min height of 52px On a really small screen, 65vh plus 52px will be more than 100%, which causes the actions to overflow and get cutoff.

It looks to me to fix the flexbox styles so that the actions never get cutoff on really small screen sizes. It seems to work fine on large screen sizes, so we only need to change the behavior for smaller screens.

Screenshot 2023-12-13 at 4 10 45 PM

@zarend zarend added P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent Accessibility This issue is related to accessibility (a11y) ios Issues specific to iOS android Issues specific to Android and removed P4 A relatively minor issue that is not relevant to core functions needs investigation A member of the team needs to do further investigation to determine the root cause ios Issues specific to iOS android Issues specific to Android labels Dec 14, 2023
@zarend zarend changed the title [IOS] Blank space display after rotate to landscape mode. bug(material/dialog): On Mobile devices, dialog action buttons are cut-off in landscape mode. Dec 14, 2023
essjay05 added a commit to essjay05/angular-components that referenced this issue Jan 5, 2024
@essjay05
fix(material/dialog): dialog actions overlow and are unreachable
efee4d9 
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
essjay05 added a commit to essjay05/angular-components that referenced this issue Jan 5, 2024
@essjay05
fix(material/dialog): dialog actions overlow and are unreachable
63fe535 
Fixes a bug in the Angular Material dialog  component where
buttons/actions are unreachable due to dialog overflowing
because of unspecified max-height for the mat-dialog-container
parent flexbox.

Fixes angular#24785
essjay05 added a commit to essjay05/angular-components that referenced this issue Jan 5, 2024
@essjay05
fix(material/dialog): dialog actions overflow and are unreachable
3ab943e 
Fixes a bug in the Angular Material dialog component where
buttons/actions are unreachable due to dialog overflowing
because of unspecified max-height for the mat-dialog-container
parent flexbox.

Fixes angular#24785
@essjay05 essjay05 linked a pull request Jan 5, 2024 that will close this issue
Open
essjay05 added a commit to essjay05/angular-components that referenced this issue Jan 8, 2024
@essjay05
fix(material/dialog): dialog actions overflow and are unreachable
c6830ff 
Fixes a bug in the Angular Material dialog component where
buttons/actions are unreachable due to dialog overflowing
because of unspecified max-height for the mat-dialog-container
parent flexbox.

Fixes angular#24785
essjay05 added a commit to essjay05/angular-components that referenced this issue Jan 11, 2024
@essjay05
fix(material/dialog): dialog actions overflow and are unreachable
7f47150 
Fixes a bug in the Angular Material dialog component where
buttons/actions are unreachable due to dialog overflowing
because of unspecified max-height for the mat-dialog-container
parent flexbox.

Fixes angular#24785
essjay05 added a commit to essjay05/angular-components that referenced this issue May 2, 2024
@essjay05
fix(material/dialog): dialog actions overflow and are unreachable
8bdb25b 
Fixes a bug in the Angular Material dialog component where
buttons/actions are unreachable due to dialog overflowing
because of unspecified max-height for the mat-dialog-container
parent flexbox.

Fixes angular#24785
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Accessibility This issue is related to accessibility (a11y) area: material/dialog P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(material/dialog): dialog actions overflow and are unreachable essjay05/angular-components
4 participants
@pkozlowski-opensource @crisbeto @zarend @tungnguyen020394