Auto Scroll To Top - Opening A New Card

[Gighub]

Hi All,

We have created a web app that displays a food and drinks menu in a grid or list view.

If a user has scrolled down on the main page and taps an item another card is opened on top of the main layout but sometimes the new card is opening up at the same verticle position as the main card underneath which is not great user experience and can result in the user not knowing there is additional information they can view.

I did find some documentation on this some months ago but failed to find it again and now I am reaching out to the community for assistance.

Please feel free to take a look at a demo of the PWA and see for yourself how this behaviour is happening, it may be easier than reading my description.

Thank you all in advance.

Please view the link on a smartphone for the best experience or resize your browser to smartphone screen size.

https://www.juzzap.com/0001/businessDetails/DEMO/food

This may help explain the problem if you follow these steps...

1. Selected Demo from top horizontal scroll
2. tap the card showing citrus fruits -(this should open showing the image at the top)
3. scroll down to the bottom if the screen (should see Kenco and Lor coffee) and close the card using the orange X
4. scroll down to the next item and tap to open more details card...

Now you will see the card opens up at the bottom of the content, not at the top.

It is this behaviour I was trying to address with a way to make sure every card always open at the top of the content and not retain the view from the previous card?

I hope this makes it a bit easier to understand, again thank you for taking the time to look into this

[nekosaur]

I'm not sure I get what you're asking. Of course the dialog fills the entire screen, it's a fullscreen dialog?

[Gighub]

Hi Nekosaur thank you for stopping and taking a look at my question

If you have time to take another look please follow the steps to see the problem I was trying to describe

1. Selected Demo from top horizontal scroll
2. tap the card showing citrus fruits -(this should open showing the image at the top)
3. scroll down to the bottom if the screen (should see Kenco and Lor coffee) and close the card using the orange X
4. scroll down to the next item and tap to open more details card...

Now you will see the card opens up at the bottom of the content, not at the top.

It is this behaviour I was trying to address with a way to make sure every card always open at the top of the content and not retain the view from the previous card?

I hope this makes it a bit easier to understand, again thank you for taking the time to look into this

[nekosaur]

Without seeing any code it's hard to know exactly what you're doing, but I'm assuming you're using a shared dialog component for all cards. You could try keying the dialog so that it gets recreated each time you click on a card.

[Gighub]

I'll look in to this, thank you and sorry for not sharing the code