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

[Dialog] Component vertically fixed on small devices #1815

Closed
bphooper opened this issue Oct 6, 2015 · 2 comments
Closed

[Dialog] Component vertically fixed on small devices #1815

bphooper opened this issue Oct 6, 2015 · 2 comments
Labels
duplicate This issue or pull request already exists

Comments

@bphooper
Copy link

bphooper commented Oct 6, 2015

Got to grips with React and creating a template for future websites. The only issue I have at the moment is when using the Dialog component on a small screen (iPhone 5 etc) and I can not get the Dialog to scroll vertically when the Dialog is bigger than the screen.

Any CSS ideas to help on scrolling the Dialog vertically on small touch screen would be great.

Regards

Ben
@craig-jennings
Copy link
Contributor

There are two things at work that prevent this. First, the positioning of the dialog is set to "fixed" by default. You can override this by adding style to the component:

<Dialog style={{ position: "absolute" }} />

The second problem comes with the overlay. Dialog calls Overlay#preventScrolling which sets the body's overflow to hidden. Currently there is no way to override this behavior. There should probably be a new prop for Dialog that controls this behavior.

@alitaheri alitaheri added the bug 🐛 Something doesn't work label Dec 9, 2015
@alitaheri alitaheri modified the milestone: 0.14.0 Release Dec 9, 2015
@oliviertassinari oliviertassinari removed this from the 0.14.0 Release milestone Dec 22, 2015
@oliviertassinari oliviertassinari changed the title Dialog Component vertically fixed on small devices [Dialog] Component vertically fixed on small devices Sep 18, 2016
@oliviertassinari oliviertassinari added the component: dialog This is the name of the generic UI component, not the React module! label Dec 18, 2016
@oliviertassinari oliviertassinari added v1 and removed v1 labels Jul 28, 2017
@oliviertassinari
Copy link
Member

oliviertassinari commented Jul 28, 2017 •
edited
Loading

I'm closing this issue for #7438

@oliviertassinari oliviertassinari added duplicate This issue or pull request already exists and removed bug 🐛 Something doesn't work component: dialog This is the name of the generic UI component, not the React module! labels Jul 28, 2017
mnajdova pushed a commit to mnajdova/material-ui that referenced this issue Nov 10, 2020
@dandv @dmtrKovalenko @oliviertassinari
[docs] Improve English and fix 404 link (mui#1815)
9fa389f 
* [docs] improve English and attempt to fix mui#1814

* Update docs/pages/demo/datetime-picker/index.mdx

Co-authored-by: Dmitriy Kovalenko <dmtr.kovalenko@outlook.com>

* Update docs/pages/demo/datetime-picker/index.mdx

Co-authored-by: Dmitriy Kovalenko <dmtr.kovalenko@outlook.com>

* fix 404

* Update docs/pages/demo/datetime-picker/index.mdx

Co-authored-by: Dmitriy Kovalenko <dmtr.kovalenko@outlook.com>
Co-authored-by: Olivier Tassinari <olivier.tassinari@gmail.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
duplicate This issue or pull request already exists
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@craig-jennings @oliviertassinari @alitaheri @bphooper