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.

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

Snackbar bottom is showing under keyboard on ios #34544

Open
2 tasks done
Ali-Azizi opened this issue Oct 1, 2022 · 5 comments
Open
2 tasks done

Snackbar bottom is showing under keyboard on ios #34544

Ali-Azizi opened this issue Oct 1, 2022 · 5 comments
Assignees
Labels
component: snackbar This is the name of the generic UI component, not the React module! external dependency Blocked by external dependency, we can’t do anything about it

Comments

@Ali-Azizi
Copy link

Ali-Azizi commented Oct 1, 2022

Duplicates

  • I have searched the existing issues

Latest version

  • I have tested the latest version

hello there,
I'm using the latest version of material-ui for a pwa app in react.js and when I use snackbar in bottom and keyboard on ios, the snackbar does'nt show because it's under the keyboard.
this behavior is correct on android but on ios it is'nt.
so please help me

@Ali-Azizi Ali-Azizi added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Oct 1, 2022
@mnajdova mnajdova added the component: snackbar This is the name of the generic UI component, not the React module! label Oct 3, 2022
@siriwatknp
Copy link
Member

Can you please share a CodeSandbox that I can reproduce?

@siriwatknp siriwatknp added status: waiting for author Issue with insufficient information and removed status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Oct 4, 2022
@Ali-Azizi
Copy link
Author

Hi,
okay, I've prepared a sample of my code and you can see by using below link:
https://f2gpx4.csb.app/

If you test it in Ios you will see the problem which snackbar will not be displayed when keyboard is showing and you can compare with android to figure out the correct functionality.

@github-actions github-actions bot removed the status: waiting for author Issue with insufficient information label Oct 10, 2022
@siriwatknp
Copy link
Member

Hi, okay, I've prepared a sample of my code and you can see by using below link: https://f2gpx4.csb.app/

If you test it in Ios you will see the problem which snackbar will not be displayed when keyboard is showing and you can compare with android to figure out the correct functionality.

Thanks! I think the position fixed is not well supported in mobile iOS, see some workarounds in https://stackoverflow.com/questions/43833049/how-to-make-fixed-content-go-above-ios-keyboard

@siriwatknp siriwatknp added the external dependency Blocked by external dependency, we can’t do anything about it label Oct 10, 2022
@siriwatknp
Copy link
Member

I mark this as "external dependency" because the browser/OS should handle this properly. Feedback welcome!

@Ali-Azizi
Copy link
Author

Thanks for your guidance but I think it's better for your awesome project to be responsive in all browsers like safari or etc.
Because it is not possible for all browsers to support our components while it is programmers responsible to create components that can be supported in all browsers.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
component: snackbar This is the name of the generic UI component, not the React module! external dependency Blocked by external dependency, we can’t do anything about it
Projects
None yet
Development

No branches or pull requests

3 participants