I experience an issue with nested views in my Ionic app. I have a custom tab
navigation which is placed within my parent ion-view. The tab navigation is intended to scroll together with the content, which is located in an ion-nav-view underneath. For that I put the scroll="false" onto the child's ion-content.
The problem is, that my content won't expand the parent's height to fit the content's height. It has a height of 100%, which is fixed to the view's initial height. So at the end of the page there is content left, which is never displayed. Here is the template code (I am sorry, I cannot provide a plunkr example):
<ion-view>
<ion-content on-swipe-left="tabs.goToNext()" on-swipe-right="tabs.goToPrevious()">
<div class="tabbed-slidebox">
<div class="tsb-icons">
<div class="tsb-ic-wrp" style="">
Was
Wer
Wo
Wann
</div>
</div>
</div>
<ion-nav-view name="stepContent">
<!-- For illustration I copied ion-view from the template which will be rendered into this ion-nav-view -->
<ion-view view-title="Schadenmeldung">
<ion-content class="step step-what padding" scroll="false">
<!-- CONTENT -->
</ion-content>
</ion-view>
</ion-nav-view>
</ion-content>
<div class="fab-sticky">
<!-- some sticky button here -->
</div>
</ion-view>
See a demo here
My view hierarchy looks somehow like this:
app view (mainly ion-nav-bar)
tabs view (mainly tab navigation)
content view (content intended to expand the ion-view's height)
(I can provide the state config if that helps)
I already played around with the CSS a lot. But since I am no CSS Mastermind, I did not find a solution.
The problem seems to come from the position: absolute of the ion-nav-view. It prevents the height to
adapt to the content.
Can anyone help?
you can add style into ion-nav-view
for example：
<ion-nav-view name="stepContent" style="height: 380px"></ion-nav-view>
Related
The example code for the ion-nav-view directive doesn't actually show its usage.
So I'm unsure how to use it.
Here is the link to the documentation:
http://ionicframework.com/docs/api/directive/ionNavView/
under the USAGE heading it says this:
on app start, $stateProvider will look at the url, see if it matches
the index state, and then try to load home.html into the
.
Pages are loaded by the URLs given. One simple way to create templates
in Angular is to put them directly into your HTML file and use the
syntax. So here is one way to put
home.html into our app:
<script id="home" type="text/ng-template">
<!-- The title of the ion-view will be shown on the navbar -->
<ion-view view-title="Home">
<ion-content ng-controller="HomeCtrl">
<!-- The content of the page -->
Go to music page!
</ion-content>
</ion-view>
</script>
This is good to do because the template will be cached for very fast
loading, instead of having to fetch them from the network.
Do I nest all of that inside of an ion-nav-view directive? Another reason for my confusion is because in one of the ionic templates the framework provides I've seen ion-nav-view opened and closed with nothing in between it this (code below is copy and pasted directly from one of Ionic's templates) :
<body ng-app="myApp">
<!--
The nav bar that will be updated as we navigate between views.
-->
<ion-nav-bar class="bar-stable">
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar>
<!--
The views will be rendered in the <ion-nav-view> directive below
Templates are in the /templates folder (but you could also
have templates inline in this html file if you'd like).
-->
<ion-nav-view></ion-nav-view>
</body>
This <ion-nav-view> behaves like a placeholder. Your other html files that you create under templates folder goes in there. So for example you then have "employees.html" in your templates folder. So the markup of "employees.html" will look something like this:
<ion-view view-title="Employees">
<ion-content>
<ion-list>
<ion-item ng-repeat="item in items">
Hello, {{item}}
</ion-item>
</ion-list>
</ion-content>
</ion-view>
the above is complete html that will be sitting in "employees.html". Basically this is the html that will be placed inside <ion-nav-view> tags.
Hope this helps.
There are similar question but not this exact one. I have this structure in an ionic app view
<ion-view>
<ion-nav-title>
<a id="go_to_app" href="#startseite">
<span class="ion-android-exit"></span>
</a>
<img src="img/logo_header.png">
</ion-nav-title>
<ion-content class="star-wrap">
.
. contents
.
</ion-content class="star-wrap">
What I'm trying to achieve is show the ion-android-exit button instead of the menu button in this specific view.
Is this possible?
There was a (way) easy and simple way to do this.
Adding <ion-nav-buttons></ion-nav-buttons> inside <ion-view></ion-view> will rewrite the menu button with whatever I want, or just hide it with no contents.
You need to use ng-if like in example here.
http://codepen.io/anon/pen/AXkJGa
after setting the value of ng conditional to true in the controller.
Example HTML
<title>Ionic Modal</title>
<body ng-controller="State1Ctrl">
<ion-nav-bar>
<ion-nav-view>
<ion-view>
<ion-nav-title>
<a id="go_to_app" href="#startseite">
<span class="ion-android-exit" ng-if="!hidethisview"></span>
</a>
</ion-nav-title>
<ion-content>
Some super content here!
</ion-content>
</ion-view>
</ion-nav-view>
</ion-nav-bar>
And JS
angular.module('ionicApp', ['ionic'])
.controller('State1Ctrl', function($scope, $state) {
if($state.current.name=="")// you need to have your state name inside quotes
//this example don't have one
{
$scope.hidethisview=true;
}
});
I use Swipeable tabs and find that its height can scroll and I do not know where to change its height to be auto. Instead, I just want to remove it.
<SwipeableViews index={this.state.slideIndex} onChangeIndex={this.handleChange}>
<div style={tabsStyles.height}>
<h2 style={tabsStyles.headline}>Tabs with sadsada dasda</h2>
Swipe to see the next slide.<br />
</div>
</SwipeableViews>
i have an ion-nav-view inside ion-content.
i want to load data dynamically into ion-nav-view.
when loading data dynamically into ion-nav-view its not resizing to content height instead its loading in a small div with a scroll bar.
<ion-view view-title="My view">
<ion-content class="padding">
<div id="test">
1
2
3
</div>
<ion-nav-view name="mydynview">
</ion-nav-view>
<ion-content >
</ion-view >
i am loading a template into "mydynview" from my controller.
mytemplate.html:
<ion-view view-title="About">
<ion-content class="padding" delegate-handle="testhandle">
<!-- <ion-nav-view> -->
<p ng-click="onlc()">test</p>
<p ng-click="onlc()">test</p>
<p ng-click="onlc()">test</p>
<p ng-click="onlc()">test</p>
<p ng-click="onlc()">test</p>
<!-- </ion-nav-view> -->
</ion-content >
I read about resizing from here:
http://ionicframework.com/docs/api/directive/ionContent/
and even that is not working.
help will be highly appreciated.
The documentation states that you need to call $ionicScrollDelegate.resize() "after the content has loaded."
Since you did not post your controller, it's not possible for me to evaluate if your calling the .resize() method before the load is asynchronously completed.
Here's a quick and dirty way for you to test if it's a timing issue: call $ionicScrollDelegate.resize() within a $timeout with a 500ms delay. If that fixes the problem, you're calling .resize() before the content has finished loading so it doesn't have the complete view to calculate the new size accurately. This isn't a solution; it's a way to diagnose the problem. If it turns out this is the problem, then you want to call .resize() on your promise / callback / whatever that gets fired when your template is done loading.
I've got this strange behaviour.
In my index.html I declared:
<body>
<ion-nav-view></ion-nav-view>
</body>
Then in my page.html I used the followin markup:
<ion-view title="Purchases" hide-back-button="true">
<ion-nav-buttons side="left">
<button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
</ion-nav-buttons>
<ion-content> ... </ion-content>
</ion-view>
The view correctly set a button to toggle side menu, but also, automatically, create a header:
<ion-nav-bar class="bar-stable nav-title-slide-ios7 bar bar-header nav-bar disable-user-behavior">
How can I change its styles? For instance: I would like to set it as a "bar-energized".
I also tried to insert, in index.html above , the following markup (amany examples show), but it does not seem to work (nav bar header remains grey):
<ion-nav-bar class="bar-energized nav-title-slide-ios7"></ion-nav-bar>
The only way it seems working is by declaring and buttons inside each and every
Just realized it was really a newbie question! I was starting from a Ionic sidemenu template, and the misterious "bar-stable" was declared inside "ion-pane ion-side-menu-content" in my menu.html file.
Hope it may helps someone other!