HTMLview horizontal scrolling

1

Hi

I’ve added a HTMLview to my project which is scrollable and often contains data that needs scrolling both horizontally and vertically.

Although this is no problem on a touch device where you simply swipe in whichever direction you want, it is a problem when viewing on a desktop with a mouse because for some reason the horizontal scroll bar will only appear at the bottom of the HTMLview.

What I mean is, there is always a scroll bar on the right hand side so you can click on that and drag up and down, but there’s no scroll bar at the bottom to drag left and right unless/until you scroll down to the very bottom and there it is.

How can I make the scroll bar remain visible (or float) at the bottom of the HTMLview (like it does on the right)?

I’ve tried adding/removing values for height/width and left/right to see if that makes a difference, as well as trying different options for the overflow, but I just can’t seem to find how to do it.

Thanks.

2

Don’t rely on page scrolling, instead put the scrollable data in its own container… i.e. a div.

3

Oh, OK, I thought a HTMLview was a div, otherwise what is it?

So are you saying that my HTMLview should contain the div? As in:

HTMLview.innerHTML="<div id=""whatever""></div>"

And then populate it with whatever.innerHTML="my content"?

Thanks.

4

In a page you have your body tag.

<body>
...
</body>

That should not scroll horizontally on mobile devices because users expect swiping to perform a different function (change pages).

So, to solve the problem you’d create a scrollable div inside of the page (body tags) and add content exactly as you have done. The problem is that the .css for the div is typically set to inherit which means the div will truncate any overflow.

What you want to do is to change the overflow property to scroll. There are three overflow properties:

  1. Overflow: controls both the horizontal and vertical scrolling
  2. Overflow-x: controls the scrolling on the x plane
  3. Overflow-y: controls the scrolling on the y plane

Using those three properties you can have scrollbars for both horizontal and vertical or just for horizontal or just for vertical.

Lastly, I’d put a box around the div so the user can see that it’s separate from the page.

5

Hi

Thanks very much for that which makes perfect sense.

The only missing bit is that I’m using AppStudio and I really don’t know where/how to simply insert a div within the body. I’ve got their UI in front of me where I drag in elements and configure them in the properties window. Where do I go to simply add a div between the body tags?

It would be good actually if AppStudio allowed us to drag in a div instead of whatever a HTMLview is (I’m guessing HTMLview isn’t a div). :slight_smile:

Thanks.

6

Use a Container. It defaults to div, and you can drag controls into it.

7

Brilliant, thanks for that. I’ll give it a go. :+1: