Skip to content
This repository has been archived by the owner on Jan 13, 2025. It is now read-only.

fix(dialog): Fix scrolling content overflowing on Chrome/Android. #4746

Merged
merged 19 commits into from
May 28, 2019
Merged

fix(dialog): Fix scrolling content overflowing on Chrome/Android. #4746

Changes from 7 commits
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
e6462b5
fix(dialog): Fix scrolling content overflowing on Chrome/Android, Saf…
joyzhong May 21, 2019
f0ea8a8
Merge remote-tracking branch 'origin/develop' into fix/dialog_scrollable
joyzhong May 22, 2019
f5dae68
fix(dialog): Fix dialog width.
joyzhong May 22, 2019
00ef660
fix(dialog): Potential IE11 fix.
joyzhong May 22, 2019
ee10be3
fix(dialog): Fix lint error.
joyzhong May 22, 2019
2eb8b80
fix(dialog): Test IE11 fix.
joyzhong May 22, 2019
9a672ab
fix(dialog): Test IE11 fix.
joyzhong May 22, 2019
ae74386
Merge remote-tracking branch 'origin/develop' into fix/dialog_scrollable
joyzhong May 23, 2019
4989276
fix(dialog): Test fix.
joyzhong May 23, 2019
88357e4
fix(dialog): Test fix.
joyzhong May 23, 2019
4efa8c7
fix(dialog): Test fix.
joyzhong May 23, 2019
7a7a1c9
fix(dialog): Test fix.
joyzhong May 23, 2019
b3704b5
fix(dialog): Test fix.
joyzhong May 23, 2019
3071c7c
fix(dialog): Test fix.
joyzhong May 24, 2019
f0247ed
fix(dialog): Test fix.
joyzhong May 24, 2019
3c04d55
fix(dialog): Test fix.
joyzhong May 28, 2019
a4f16ab
fix(dialog): Modify screenshots
joyzhong May 28, 2019
a85e5cf
fix(dialog): stylelint.
joyzhong May 28, 2019
f17051c
fix(dialog): Modify screenshots
joyzhong May 28, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 8 additions & 2 deletions packages/mdc-dialog/_mixins.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,12 +80,15 @@
// See https://github.com/philipwalton/flexbugs/issues/216
.mdc-dialog__container {
@include mdc-feature-targets($feat-structure) {
align-items: center;
display: flex;
flex-direction: row; // IE 11
justify-content: space-around; // Ensure Safari centers the dialog (because it treats the container's width oddly)
box-sizing: border-box;
height: 100%;
transform: scale(.8);
opacity: 0;
pointer-events: none;
}
}

Expand All @@ -98,8 +101,11 @@
flex-grow: 0; // IE 11
flex-shrink: 0; // IE 11
box-sizing: border-box;
width: 100%;
max-width: 100%; // IE 11
max-height: 100%; // IE 11
pointer-events: auto;
overflow-y: auto; // IE 11

@include mdc-rtl(".mdc-dialog") {
text-align: right;
Expand Down Expand Up @@ -385,7 +391,7 @@

@mixin mdc-dialog-max-width($max-width, $margin, $query: mdc-feature-all()) {
$feat-structure: mdc-feature-create-target($query, structure);
$max-size-calc-expr: calc(100vw - #{$margin * 2});
$max-size-calc-expr: calc(100% - #{$margin * 2});

.mdc-dialog__surface {
@include mdc-feature-targets($feat-structure) {
Expand All @@ -410,7 +416,7 @@

@mixin mdc-dialog-max-height($max-height, $margin, $query: mdc-feature-all()) {
$feat-structure: mdc-feature-create-target($query, structure);
$max-size-calc-expr: calc(100vh - #{$margin * 2});
$max-size-calc-expr: calc(100% - #{$margin * 2});

.mdc-dialog__surface {
@include mdc-feature-targets($feat-structure) {
Expand Down