Join GitHub today
GitHub is home to over 40 million developers working together to host and review code, manage projects, and build software together.Sign up
that is my major issue on the QDialog. If you open a standard Dialog and there is a Input Field the virtual Keyboard overflow the entry-fields.
So no entry is possible .. Scrolling to the fields else is also prevented.
With the seamless Option, the entries are possible, but the scroll / overall handling of that seamless Dialog is awkward (Background-Scrolling etc.)
For Testing there is a Sandbox:
If you make a slow motion .. you will see, that standard Dialog scrolls short up - but it snaps down ..
That it is possible, to have a working Dialog with Input on ios Devices, you see on my codepen:
(here the Dialog is NOT snapping down - opened in an non seamless Dialog)
May the reason that it is working there (same Dialog Code) is, that the codepen wrapper is blocking some dyamic body-attaches by the quasar fw .. (i think so) (there are some .js routines).
So the solution is maybe to make that to the body element dynamic applied styles / classes (more) ios compatible - so that the explained snap-down will not occur...
This issue is really a big problem for me, because all kind of Dialogs (Login, Signup, Edit, etc.) are not usable for any iphone / ipad User.
Affected: All Apple i-devices with safari, IOS: 11, 12, 13, IpadOS: 13
It would be really great to get here a solution. Many thanks to the Team.
There is not much we can do on the framework side.
You can check an example here: https://codesandbox.io/s/codesandbox-app-44xoy
its a little funny to read this bloody workaround which i posted myself a week ago inside the discord components channel: (wednesday , 12:23)
... make those input fields nearly above the virt.keyboard and made a resize of the dialog at the focus event (on the input) .. but with landscape ....
but i also wrote, that to handle all use-cases is nearly impossible .. :-(
But ... much more important is, that this dialog on ios has worked until version bump 1.1.0 without any problems.
To get the impression : Please check my sandbox - same origin code - only with 1.0.5:
******************************************************* - they primary occurs after the
There are some more issues since , like the hopping of the the complete layout if a drawer
Please understand this "manifestation" of this problem-situation as my constructiv critic, as i
90.9 percent happy ...
Wow .. what a big step, first time a Dialog without backscrolling and also the Input-Fields are working.
And I am also sure, that i heard here in Frankfurt some romanian curses and banes *%$%$$$ yesterday against some webkit-developer in CA :-) ..
To understand my little tear (the left 9.1 percent for full-happy) that the layout is jumping down when a QDialog, QDrawer, Bottom-Sheet etc. is invoked.
(which happens only since 1.1.0 .. -> also "a side effect" of the non-scrolling option ?)
With jumping down i mean:
Ipad -> Safari -> have some Tabs (normal state for a ipad user, that there are some tabs open)
-> Portrait Mode (!) -> go to ; https://quasar.dev/start/pick-quasar-flavour
Open a Drawer, Dialog, Bottom Sheet, .. then the tab bar get maximized and the complete layout jumps around 50px down:
(btw: if you start in landsacpe mode -> go to the quasar docs, the drawer is not in overlay, so no jumping .. also if you turn into portrait mode)
To prevent this jumping i can add inside app.sass:
but i know, that i am destroying then the "prevent scroll additions, which prevent the background scrolling.
long story short
It would be great, if you can open me a way for easy, programmatic adding this css-rule if i have
sorry .. if a may are paranoid .. but .. there is a waiting pr with going by "dialog resize" ...
this will not work as we got it actually ... on iphone / eg. landscape etc. this
looks like this - and once again the scrolling is prevent (i used pdans sandbox):
Big questionmark ...
The screenshot / behavior is when using your sandbox
from monday. My fear is, that the upcoming pr is more-or-less the routines like in your sandbox and reverting that acutal 1.2.5 handling, where the screen is not locked during the virtual.keyboard display.
Good Morning Dan,
hope its allowed to write a little testrun-feedback from this morning:
IOS TOP - IOS BOTTOM - IOS NORMAL:
With the 977b080 it seems there is a little timing-issue with the Component Display.
Ipad Landscape primary tested, (but also happens on the iphone) the component is not displayed / final rendered (but no so often . may because the iphone 6plus is not the fastest smartphone ..)
Only blinking cursor, and need touch to reactivate / display the Dialog Component.
May other testers has this effect also?
(the IOS TOP (first input field issue) on Iphone is now perfect
please .. if you have 5 minutes, please read my following lines and if there is need for
Quasar is great, is perfect, is the "eierlegendewollmilchsau" of the frameworks.
The only critical thing is the backscroll handling and ui-distortion on ios.
If you develop a actuall webapp with qdialogs and qdrawers and you give it to the ios world, the experience is mixed. The displacement of elements on Drawer opening and narrowing the viewable space is no native-like feeling and there is also a bad effect e.g. on the infinite scroll if it is in the background screen. This infinite Scroll fires unlimited and this makes other trouble. (i can stop it by handling the frontend event)
My first "ios issue" with angular and mobile is over 5 years ago.
Since them, i analyzed many, many ... solutions so i can say, i am experienced backscroll / displacement issue person.
A really perfect solution, which has no Displacement effect, no scroll up block effect on ios (also IpadOs with/without desktop request etc.) i found on:
Landscape, Portrait, Shaking, switch-on/off Testing .. all was solved without any issue.
I am no good programmer to implement or test this with the quasar fw. My coding looks like a tnt.bomb inside a italian-pasta-factory.
But may you can take a look and may find the "missing-element" for getting the ios drawer / dialog working with:
Thank you very much for taking the time