Is there a way to tell if an alert needs scrolling to read more?

Ionic Framework
1

I am using a generic help alert service that has a function that takes a text message as input and displays the alert with an ‘OK’ button to dismiss it.

When the message is too long for the alert window, the user can scroll to read more.

This works perfectly.

However, from a UX perspective, I’d like to tell the user to scroll in order to read more - perhaps I’ll use a subHeader that says ‘(scroll for more)’ or maybe put three dots at the bottom.

But I can’t figure out how to programmatically know if the scroll area is overflowing and needs scrolling by the user or not.

Is there a way to know that within the code?

Thanks for any pointers!

2

I mean, if you have an alert that has so much content that it needs to scroll, don’t use an alert :smile:

For real, it might be easier to use a modal or something else. Alerts should be used for short, quick interactions that users could read at a glance.

3

Thanks, Mike, for your suggestion. These are help alerts. Most pages in my app have a help button you can click to quickly get an alert that describes what’s on the page and how to use the page (text-only, with an ok button to dismiss). The backdrop and the centering and smaller window are perfect for this. Naturally, some descriptions would scroll. This use case goes perfectly with alerts, IMO. But I do get it that for complicated use cases a modal is better. It seems overkill in this case to use a modal that mimics all style features of an alert. Trying to target devices as small as the iPhone-4 - only in those cases, some of the help messages require scrolling. I guess there’s no easy way to tell if the alert text overflowed into scrolling. It’s okay, I’ll live with it, only the iPhone-4 people would notice.

4

I have exactly the same case. A modal seems overkill for a description with a short sentence.
Did you already find a solution in the meantime? :slightly_smiling_face:

5

I ran into the same issue in my app.

My solution: use CSS to fadeout the text toward the bottom, so the user can tell there’s more text to be scrolled to.

Another possible solution: use ViewChild on the inner element, the calculate the scrollHeight against the contentHeight to determine if there is content outside the viewing area.

You could also use CSS to ensure the scrollbar is visible.