I followed last example of this blog entry and I'm not being able to scroll my app.
To test this example I used just created some divs (with cards on it), those cards are loaded with dynamic data.
My home.html file looks like:
<ion-view>
<ion-tabs>
<ion-tab>
<ion-content>
<div>
<!-- several divs goes here -->
I can't be able to figure why content is not scrolling. I also tried with solution of this post without any luck.
Hope you can help me! Thanks in advance.
Use this line..
<ion-content scroll="true">
if you hide scrolling then use..
<ion-content scroll="false">
Related
I am working on a project using ionic framework. I want to remove the navigation section from top of login page and set its height full of device's height.
I removed header by setting this directive hide-nav-bar
i.e <ion-view title="Login" hide-nav-bar="true">
Although it is removed but a white space in the place of navigation bar is showing. I want login page's height as full of screen's height but I am not getting any solution.
What is the best approach to fix this issue?
Add hide-nav-bar="true" to your ion-view for that page.
<ion-view hide-nav-bar="true">
then add
html,
body {
height: 100%;
}
Alright I found solution myself.
Just remove this class class="has-header" in the view were you don't want to show header. And it will be fixed.
I use the module angular-snap to adding a menu to my app like this:
<snap-content>
<div ui-view='header'></div><br/><br/>
<div ui-view='content'></div>
</snap-content>
<snap-drawer>
Menu
</snap-drawer>
And my ui-view (content):
<div class="content-padded">
<div class="">
<center><h4>Accueil</h4></center>
<!-- ... -->
</div>
</div>
My problem is I want to put a scrollable div inside my snap-content. And, I don't want the snap-content will become scrollable.
I have the following image to help you to understand what is my problem:
The three elements in the picture are in snap-content, but only the blue div have to scrollable.
Thank you in advance for your help and sorry for my bad English.
The solution I found is :
putting the snap-content "scrollable"
putting the divs I want outsdide the scroll "fixed"
putting a "top" and a "margin-top" in order to have the scroll under my others components.
If somebody have another method, it will be with pleasure.
I have tried to find a solution to this white background problem but after searching and testing all your answers, nothing works.
<ion-tab title="News" icon-off="ion-android-earth" icon-on="ion-android-earth" href="#/tab/news">
<ion-nav-view name="tab-news"></ion-nav-view>
<ion-view>
<ion-nav-bar class="hackbg">
</ion-nav-bar>
</ion-view>
</ion-tab>
Even with this, I can see the white background for a fraction of a second when I navigate through the tabs which is really annoying if you ask me frowning
I have 4 tabs, 3 of them get dynamic data from an http call, the last tab loads an iframe with a video from YouTube. When I launch the app, and navigate through any of the tabs, I can see the annoying white background. Now, if I click on the 4 tab (the iframe video) the first time, I will also see the white background for a fraction of a second. However, if I navigate to another tab (which that said, I will also see the white background), and I come back to the video tab, I will then NO see the white background anymore. All the other 3 tabs I will always see the white background, independently of the times I visit the tab section.
My individual tabs pages look like the following:
<ion-view hide-nav-bar="true" class="hackbg">
<ion-header-bar class="bar-positive bar-header" align-title="left">
<h1 class="title">Logo...</h1>
<div class="buttons pull-right">
<button ng-click="go1()" class="button button-icon icon ion-ios7-1"></button>
<button ng-click="go2()" class="button button-icon icon ion-ios7-2"></button>
<button ng-click="go3()" class="button button-icon icon ion-ios7-3"></button>
<button class="button button-icon ion-android-more" ng-click="popover.show($event)"></button>
</div>
</ion-header-bar>
...
As you can see, I have also added the hackbg on the ion-view with the hope that would fix the problem but it didn't.
I have try/catch all over the code to try to see if I have an error somewhere in the code and that's why the white background. However, no luck, I don't see any error anywhere.
If I go to the individual pages from the navigation (e.g. look at buttons like go1(), I do not see any white background). The problem are only related to the tabs.
Ah, my splashscreen also shows the white background for a fraction of a second after it loads my splashscreen. I also went and google all possible solutions but none did the trick. I also went through all the possible answers I could find on stackoverflow but nothing did the trick.
My .run contains the following:
$ionicPlatform.ready(function () {
setTimeout(function () {
navigator.splashscreen.hide();
}, 6000
I extended the delay to 6000 hoping it will make the white background disappear. It didn't. Interesting thing is that sometimes you see it longer and sometimes extremely fast. It is not consistent.
Does anyone knows another trick I could try to fix this?
I think this is not possible due to Ionic pages only loads once.
I'm just beginning with Ionic and AngularJS. I'm having trouble creating a mobile app that has both a slidemenu AND the bottom navigation tabs. Is there a demo/template/codepen for doing such a thing?
My code is here (all client-side): http://www.danhendricks.com/apps/soonhired/www/
When I click the top-left menu icon and the menu appears, clicking the links brings me nowhere - it simply closes the menu.
*I tried to put this in codepen or something similar, but since my files are in folders, I couldn't figure out how.
danielh, i was looking for a solution to this problem and I've found your post. It might help to someone else.
http://codepen.io/calendee/pen/oaDhH
<ion-side-menu side="left">
<ion-content>
<ul class="list">
Home
About
Contact
Feature
</ul>
</ion-content>
</ion-side-menu>
I have a few static html pages of content. I want to make an index page that has two div's One for a sidebar menu and one to hold content. When one of the menu links in the sidebar is clicked I want to load one of the other static html pages into the content div.
I just cant find any documentation that shows how to do this, so i'm not even sure if it's possible. Can anyone help?
You can also use ng-view to setup routes that will load your templates into your div. It's pretty straight forward, and there's a good example # https://docs.angularjs.org/api/ngRoute/directive/ngView
Use ng-include:
<ng-include
src="{string}"
[onload="{string}"]
[autoscroll="{string}"]>
</ng-include>
http://docs.angularjs.org/api/ng.directive:ngInclude