ons-scroller tag not working in Onsen UI

0
votes

I am using Onsen UI v1.0.4

Here is the code

<ons-page class="center">
<ons-navigator-toolbar left-button-icon="fa fa-lg fa-bars" on-left-button-click="ons.splitView.toggle();">
    </ons-navigator-toolbar>

<span style="font-size:20px; line-height:30px">
Some Content
    </span>

<ons-scroller>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
</ons-scroller>     
</ons-page>

Output:

enter image description here

Problem:

The text in <span> is missing and the content is not scrollable. Any ideas or suggestions to this problem? Thank You.

Update:

One thing I noticed was that, this problem occurs only when the ons-tabber tag is used along with a ons-scroller. So posting my own answer with the cause and solition to the problem.

2
cordovaonsen-ui

2 Answers

2
votes

This is answered from my own experiance. So please correct me if I am wrong.

Fact: The content area has to be clicked or touched to start scrolling it.

Issue: When ons-tabber is added to a page with ons-page a new div of class tab-bar-content is inserted into the page. This div is transparent and resides just above the content area, stealing any click or touch the content is supposed to receive.

Solution: Add the following style

.tab-bar-content{
z-index = -1;
}

Explanation: This style sends the tab-bar-content div behind the content area, leaving it open to accept any clicks made on that area.

1
votes

ons-scroller directive occupies the full screen and your span tag was pushed away. So you need to locate your span into ons-scroller directive as following.

<ons-scroller>
    <span style="font-size:20px; line-height:30px">
        Some Content
    </span>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>
    1<br>        
    1<br>
</ons-scroller>

Onsen UI Team says " ons-scroller directive will not occupy the full screen on Onsen UI 1.1".