Need scrollability inside stacked cards

Hi,

I am using stacked cards in my app in order to show some marketing contents, which holds some client related image and one html web block in order to render the HTML content which was coming from the admin portal web app.

While I am doing this, i noticed that if length of the content get increased, half of the content is not displayed in the screen, i placed scroll property to the HTML web block and to the Parent container and for the whole page also.

Then also i am unable to scroll or view the full content, i think its because of the top swipe property of stacked cards overriding the scroll css. But i can see the overflowing content while swiping the stacked cards. Help me to sort out this issue.


Thanks,

Vignesh Balasubramanian

Solution

Hi Vignesh,

I understood your concern related to Stacked Cards and Vertical Scrolling which you required. 


You can do following two things to overcome this issue: 

1) Enable Scroll for your long content and Disable Scroll for its parent. i.e. Your Stacked Card. In this case you have to remove vertical scroll of Stacked Card by using some JavaScript/CSS tricks (Not recommended)

2) Truncate your long string with ellipsis. On click of that specific card, open a popup and show more details. This approach is more generic in most of the applications when you have larger content. It will only show you strictly useful information at first, and then if you will click on the details, it will show rest of the content in popup. (Recommended)

Let me know if you have still any issues or concerns on this.

Regards,
Palak Patel

Solution

Hi Palak,

Thanks for your idea, i have implemented your second idea and its look great. Thanks for your quick reply, which helps me on time.

Thanks,

Vignesh Balasubramanian

Great to hear that you have successfully implemented functionality by your own.

Keep Low-Coding :)