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.
Related
I am developing an app with angular and ionic, and I am facing a strange issue with scrolling.
What I currently have, is a directive to display some temperatures on a page.
Everything works, but if I try to scroll using the mouse wheel (when the mouse cursor hover some text) the page won't scroll. If, however, I have the mouse cursor somewhere else, the page scrolls.
To better explain and show this issue, I've created a codepen which you can find here: http://codepen.io/NickHG/pen/beBGdx
I have no idea why this happens.
Any suggestion?
Thanks
I've found a workaround.
Set overflow-scroll="true" in the ion-content.
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 this weird issue with my angular app. It doesn't happen every time but I've been able to consistently reproduce it if I click to it as quickly as I can as soon as my angularjs app loads.
Basically my right pane directive will sometimes render a blank page. This page however appears when I resize the browser window a little bit.
I'm not even sure where to begin looking to resolve this bug. I tried messing around with $timeout and $scope.$apply but it didn't seem to do anything.
Has anyone seen anything like this before and if so, how did you resolve it?
Note the directive I use does use ng-include with a value that is dynamically generated from the custom directive's associated controller.
P.S. Another oddity, if I move my mouse over the allow main dock then it loads the page too. (I assume it's doing an unfocus action on the browser window.) I wanted to see if this was a browser specific issue because of this. Looks like it's only Chrome where this is a problem, as I can't reproduce the problem on firefox.
Same problem caused by CSS - display: table, found a solution by changing it to display: inline-block, so check if you have a such.
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.
I got this project where the footer is absolute positioned to the bottom. It looks nice but if I load a page where angular is about to inject some long content the div initially renders at the bottom of my screen then the content is injected and the div remains there even though the page got a lot bigger.
This question is more towards the angular community, I probably can hack it with javascript to recompile the layout somehow but I'm just wondering if there are other possible solutions out there.
You might want to have a look at ngCloak, and tag your footer with it while the injected content loads.
http://docs.angularjs.org/api/ng.directive:ngCloak