Iphone container scroll


#1

I added: float:left; overflow-y:scroll; -webkit-overflow-scrolling:touch; to container style
the container, innerHTML is a long html table, the problem is the container dose no scroll at all

settings:
Container attributes: data-role=none
HTMLtag: div


#2

Do you really need to scroll within the Container?

If you can design your form so the entire form scrolls, you can take advantage of the scrolling which is built in. It’s far superior to scrolling zones within the page.

The key thing is ‘enableAppScrolling’ in Project Properties,

See this:
http://blog.nsbasic.com/2016/01/making-apps-which-scroll/


#3

Scrolling the Form is nice if I have just one list or table to show, my problem is this, I have two different tables
in one screen,

I wonder why using (overflow-y: Scroll; -webkit-overflow-scrolling: touch) works very good when I make normal HTML file, but if I apply this css on div inside NSBasic project not working at all.

-I tried NSBasic Container (DIV tag) and data-role=none, but not working
-I tried add div at run time and set the css to (overflow-y: Scroll; -webkit-overflow-scrolling: touch) but also no luck


#4

Do the tables have to be side by side? Or can you stack them?

Are they actually tables?


#5

they are pure html tables, one on top of screen and the other on the bottom


#6

You have a few options:

  1. Do as I originally suggested, and use the native scrolling. Scroll the entire page, not just within each table.

  2. Use the DataTables library. It has scrolling and has a lot of other nice features built in:
    http://wiki.nsbasic.com/DataTable_(Bootstrap)

  3. Try to get your own scrolling working properly. This is the hardest one to do. You have to worry how this is implemented in different browsers, as well as if browsers change. It’s fragile and complex. The Common Grid control does have browsing - it uses the iScroll library.


#7

if you can give me a clue for this it may help solving the problem:
I wonder why using (overflow-y: Scroll; -webkit-overflow-scrolling: touch) works very good when I make normal HTML file, but if I apply this css on div inside NSBasic project not working at all.

is there any thing in NSB overrides div css I’m using ?


#8

It’s possible. To see what CSS is affecting your control, right click on it in Chrome and choose Inspect. The right hand side of the Chrome Debugger will have a panel showing all the CSS rules which apply.


#9

Solved,
ugly solution but works, use jqm List control

 $("#List1").empty();
 $("#List1").append(MyHtlmTable);
 List1.refresh()

scroll nicely on both android and ios


#10

Thanks for the good news!