I have a long Onsen UI page. After scrolling to the bottom of the page, I was able to load a new content in the same page. However, the page is still displayed at the same and current position.
Note: I am using ons-list. Is there any auto scroll to top in ons-list after the list is refreshed?
I wonder how I can make it to the top position after new content is loaded.
Anchors and scrolling depend only on the browser.You can use Angular $anchorScroll or anything similar to handle that behavior. What you could find useful in Onsen UI for this are the events. You can address the scroll with the mentioned tool in a postpop event in case you are using popPage, or in any other event listed in Onsen UI's docs.
Hope it helps.
Related
Can anyone help me create this in-page navigation that changes as you scroll through the page? I can’t find any documentation on it. It is on the right side of the photo.
Here is the link to the github file: https://github.com/mui-org/material-ui/blob/master/docs/src/modules/components/AppTableOfContents.js.
They detect the scroll with window.addEventListener('scroll') and map the scroll position to the node location of the chapter titles.
Onsen UI: v2.0.1
AngularJS: 1.5.9
I am building an Android and IOS application that requires dynamic tabs (ons-tab) like in native applications. The content in each tabs can be up to a hundred items. So I want to use ons-lazy-repeat for the ons-tab content to minimize memory consumptions. How do I go about achieving this (dynamic tabs and ons-lazy-repeat ) with Onsen UI. I have searched online and I couldn’t see any solution.
Thank you!
The ons-lazy-repeat component is described in detail in the documentation.
Dynamic tabs can easily be achieved by using the ng-repeat clause of AngularJS. If you don't want to load the content of each tab right at the beginning, you have multiple options like ng-if or ng-include to make sure that only the content of the current visible tab is loaded. You may access and check the visibility of the $index variable that is available in the ng-repeats scope to do so.
See this post how this may be done. Onsen offers a tabbar and tab components which will work the same way as the tab div's in the questions answer.
I have angular UI bootstrap's carousel directive implemented on my site. Everything is working fine and suddenly I noticed that whenever I browse to other sites, leaving my site open in one tab and come back to my site again, the pager and carousel controls stop working. It's strange but I have set my carousel to auto rotate and it also stops.
The carousel won't work until I refresh. First, I thought I had some bugs in my code, but when I tried their own slider from the https://angular-ui.github.io/bootstrap/#/carousel website, also shows the same behavior.
Any thoughts or fixes on this?
For the code, please visit this link :
https://angular-ui.github.io/bootstrap/#/carousel
And scroll down to the Carousel section and click Edit in Plunker.
Thankyou!
This is a known issue and is under investigation.
Need help in resolving the scroll issue.
I have enabled the overflow attribute for the ng-view div, the view which loads has no scroll enabled. The scroll becomes visible only after the browser is reloaded or refreshed.
Note: css for ng-view are inline.
After doing some more research was able to implement the scroll bar using ng-scrollable module form https://github.com/echa/ng-scrollable. Don't know what was the issue with the regular overflow scroll attribute css. Anyways now it is working
I'm not sure what exactly you're doing wrong since I cannot see any of your code here so I'm directing you to a guess based solution. You should try enabling autoscroll=true in your ng-view directive.
From the docs,
autoscroll -
If the attribute is not set, disable scrolling.
If the attribute is set without value, enable scrolling.
I'm using the angular ui bootstrap accordian. Everything works great except when I expand an accordian section that is big enough to cause the browser to show a scrollbar for the page, the whole page jolts to the left by the amount of the width of the scrollbar. When the accordian is small enough that a scrollbar isn't needed, the page jolts back to the original size.
I'm not sure what to do about this...does this require a hack, or is there some elegant solution using accordian settings or bootstrap?
I think your only solution is to always show the scrollbar
How to always show the vertical scrollbar in a browser?