Button inside scrollbox?

I’m making a scrollable waiver with lots of text that has a button at the bottom.

I created a text element and set the Content Overflow to Scrollbars. I need the button to be at the bottom of the text, but can’t find the simple way to get it in there.

How can I achieve this? Thx!

If you add both the text and the button to a group, and set the group to have content overflow as ‘Scrollbars’ you can get this same effect on multiple elements. Make sure you remove content overflow from the text if you do this.

1 Like

Works perfectly. On Android.

On iOS the scrollbox doesn’t scroll up past what is first seen - and therefore won’t reveal the button I put at the bottom. How can I get a text scrollbox to work on iOS?

Can you share an example?

Gladly. Visit the website below on Android and scroll till you see the button. Perfect!

Now go to the website on iOS and you cannot scroll to see the button.


The issue on iOS is that the scroll events are going to your HTML Widget (iframe) and not the group, thus since the iframe is fully sized you’re just getting the elastic bounce back.

In theory you could choose “Ignore all pointer events” in the Actions inspector for the HTML Widget, but then that does not seem to have momentum scrolling.

It would probably be better to use the Inner HTML of a Rectangle element instead for your scroll view. This means you can’t use document.write, but you can use other methods to dynamically change contents if you need. Otherwise, you might be able to make your own <iframe> element with the scrolling="no" attribute, but that is just a guess as to if it works.

Let me know the steps when there’s a tested solution that works. Thx.

With that attitude maybe Hype is not for you :slight_smile: This is the issue

and the steps suggested to follow.

It’s your job to make the changes and test it not Hype’s :wink:

It’s because of the HTML Widget (iframe) as Jonathan states.

I got scared because I need to use document.write to change the text and I don’t know how to do that in a rectangle. Ignoring pointer events did the trick for the HTML widget since I don’t care about momentum scrolling.

Hype is for me because I want great results but I’m not a great programmer!

Thanks guys.

To change inside a rectangle you would use

// Element is the rectangle you want to change
var element = hypedocument.getElementById("myID");
element.innerHTML = "myText";

Glad you found a solution

Fantastic. THANKS.