I want to make a view in ionic zoomable when pinch. Is it possible to achieve this? I have see many many posts about zoom images and some of them work fine. But i want to make ion-view acts the same way and i haven't find any solution yet.
Any help would be appreciated. Thank you.
You may add an ion-scroll inside your ion-view to enable zooming
<ion-view>
<ion-scroll zooming="true" direction="xy" style="width: 400px; height: 400px">
<div>
Your content goes here
</div>
</ion-scroll>
</ion-view>
Related
I’ve created a few components that handle form submission functionality. In each of these components, I want the form submit/cancel buttons to be fixed at the bottom of the view, much like the functionality available via ion-footer. The submit button needs reference to the variables + methods in the component for [disabled] + (tap) functionality, for example [disabled]="!formGroup.valid" (tap)="submitForm()"
If the component is a child of ion-content then there is no way to add ion-footer as it will be contained within ion-content, instead of below ion-content. At first glance, having ion-footer inside ion-content appears to view properly, but the rendering can be buggy especially in scroll situations. I went as far as setting a force-bottom css class with fixed position/bottom but it looks like the ionic javascript overrides fixed positioning when inside ion-content, so a pure CSS solution does not seem to be possible.
<ion-content>
<a-form-component>
</a-form-component>
</ion-content>
<ion-footer>
<!-- add a-form-component's button here -->
</ion-footer>
Any recommendations on how to achieve the desired functionality?
TIA
Let's say you have a page called page and a component called cp
inside page.html you have the component <cp></cp>
Inside cp.html you have
<div>anything goes here</div>
<div>anything goes here</div>
<div>anything goes here</div>
<div>anything goes here</div>
<div id="the-footer">
<button>login<button>
</div>
inside page.scss:
#the-footer{
background-color: #efefef;
text-align: center;
position: fixed;
width: 100%;
bottom: 0px;
z-index: 99999;
}
This will achieve the same result as ion-footer.
The div containing the button will always be visible regardless of the scrolling.
hope it helps
I'm using Ionic version 3.19.0. I'm trying to use "ion-scroll" to zoom in and scroll an image. Sadly, this does not seem to be working, I'm using the following code:
SCSS file:
page-contact {
ion-scroll {
white-space: nowrap;
height: 100%;
}
}
HTML file:
<ion-content>
<ion-scroll scrollX="true" scrollY="true" zoom="true">
<img src="assets/imgs/debugMap.png" alt="Map">
</ion-scroll>
</ion-content>
The image displays fine, but I'm not able to either zoom or scroll. I can't seem to find why this is the case. Is my code wrong or am I missing something?
Thanks in advance!
I don't have an answer for scrolling, but zoom not working is a known-open issue: https://github.com/ionic-team/ionic/issues/5701
I'm trying to give my app a full-sized background. But I don't really know where to put it because wherever I put the image the navbar hasn't the background.
So I tried to surround my ion-content and my ion-footer with a <div> and hoped to give it the background-class. but in this case nothing I can't see anything on the screen. Right now my background is only inside the ion-content and the footer is still empty. How can I change it?
My code:
<ion-content class="bg-image" padding>
</ion-content>
<ion-footer>
<ion-toolbar>
</ion-toolbar>
</ion-footer>
Just like you can see in the docs, you need to add the fullscreen property to the ion-content:
<ion-content fullscreen="true">
<!-- ... -->
</ion-content>
If true, the content will scroll behind the headers and footers. This
effect can easily be seen by setting the toolbar to transparent.
After updating an existing Ionic project from 1.13-beta to 1.14-beta I've experienced some behaviour I can't explain. When changing from one viewstate to another, the old view doesn't leave the page. Upon logging both angular ui router events and Ionic navigation events I've noticed Ionic's Exit Events aren't fired:
$ionicView.leave
$ionicView.beforeLeave
$ionicView.afterLeave
Documentation: (http://ionicframework.com/blog/navigating-the-changes/)
Has anyone else experienced similar behaviour? If so, have you found any way to resolve this?
Events Fired:
$stateChangeStart: App.LoadApp.Input -> App.Main.QrToken
$viewContentLoading: Main
$viewContentLoading: QrToken
$stateChangeSuccess: App.LoadApp.Input -> App.Main.QrToken
$ionicView.beforeEnter
$ionicView.afterEnter
$ionicView.enter
I can load in the QrToken view if I Don't nest it inside Main, so I believe the problem lie there. Can anyone take a look at my Main Template and help me find a solution.
<div ng-controller="fbMenuController">
<ion-side-menus>
<!-- Left menu -->
<ion-side-menu side="left">
<ion-header-bar class="bar-dark">
<h1 class="title">Menu</h1>
</ion-header-bar>
<ion-content scroll="true">
<div ng-repeat="Group in fb.Model.MenuGroups">
<ion-item class="item-divider">{{Group.Name}}</ion-item>
<!-- href="#/Main/{{Page.Name}}" -->
<a ng-repeat="Page in Group.Items" nav-transition="android" nav-direction="swap" class="item" ng-click="fb.SelectPage(Page.State)">
{{ Page.Name }}
</a>
</div>
</ion-content>
</ion-side-menu>
<!-- Center content -->
<ion-side-menu-content>
<ion-header-bar class="bar-dark" ng-show="fb.Model.ShowHeader">
<div class="buttons">
<button class="button-icon icon ion-navicon" ng-click="fb.ToggleLeftMenu()"></button>
</div>
<h1 class="title">{{ fb.Model.ActivePage.Name }}</h1>
</ion-header-bar>
<ion-content scroll="true">
<ion-nav-view name="Main">
</ion-nav-view>
</ion-content>
</ion-side-menu-content>
</ion-side-menus>
</div>
If your view is wrapped in a tab using <ion-tab>, you need to register for $ionicNavView-Events:
$scope.$on("$ionicNavView.leave")
This is an open issue https://github.com/driftyco/ionic/issues/2869 and probably occurs when view-cache="false".
On my case $ionicView.leave worked in nested views but not when moving between tabs nor did $ionicParentView.leave so I came around it with another solution.
Solution:
On MAIN controller I added:
$rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams) {
if (fromState.name === 'name-of-leaving-state') {
//your code here, similar behavior with .$on('$ionicView.leave')
}
});
Hope it helps
I had this problem the other day. I was listening for the event on my child controllers. When I moved the listener to the parent, it worked. I wasn't quite sure why, but now I think I know why. It's because of the way Ionic caches the views. Specifically this line from the docs:
If a view leaves but is cached, then this event will not fire again on
a subsequent viewing.
It's likely that your views were cached before you added the listener and the leave event never fired. But since your parent is... well... the parent, its leave event is triggered any time you leave any of its children. I haven't officially tested this, it's just a hunch. To test, try telling ionic to not cache the view by adding cache-view="false" to your ion-view declaration.
See docs here.
Found the problem. The 'Main' state was defined without the attribute
abstract: true
this worked in Ionic 1.13-beta but Aparently breaks in Ionic 1.14-beta. Didn't find this change in any of the migration posts on either Ionic, AngularJS or Angular-ui-router, so I don't know why this solved it. If anyone can elaborate more on the behavior in this situation, I'd be grateful but for now I have a solution.
I know this is quite old, however i wanted to add that on Ionic v1.3.4 (the last version) the $ionicView.beforeEnter && $ionicView.afterEnter all work. I mention this because others have commented that v1.3.x was having issues with controller views for .beforeEnter and .afterEnter. But I don’t ever recall having issues on any version of 1.3.x.
That being said, I came to this thread because I am updating an older ionic v1 app and ran into a problem where the $ionicView.beforeEnter was not firing and I could not figure out why. It turns out the template that goes with that controller was missing closing HTML tags on a few <i class="icon> elements…I didn’t add the closing </i>
Thus, apparently, certain elements missing a closing tag was preventing the controller $ionicView.beforeEnter/afterEnter functions from firing. Don't know if its all tags or specific tags but I can say I had NEVER seen that before so it took me a while to figure out the issue was in my template and not in my controller.
For what its worth, hope my discovery helps those in the future.
I have an issue to use an image with gradient as the background image for the main menu bar.
This the image for the background:
As you may know, the image has 2 gradient, first, the very far left and secondly 3/4 to the right. What I want to achieve is like this:
Does anyone know the best practice to do this? I know the only problem with this is the width of the browser, where I need to make sure the very far left will start with very light grey. The very far right, will be the dark grey.
Another problem that I have is the center gradient for the main page:
This is a little bit easier and can be done by CSS gradient. However, I have been trying to set the gradient start from the center, behind the yellow div.
If anyone knows how the best way to achieve this, that would be great.
Thank you for you help in advance.
If just use the image as an background image?
<div style="width: 896px; height: 20px;background-image: url(bg.png);"><div style="padding-left: 250px;">test</div></div>
To achieve this purely in css, you could make two containers with a gradient each, that way they could change width and it would still look the same.
For example
HTML:
<div id="container">
<div id="gradient1"></div>
<div id="gradient2"></div>
</div>
CSS:
.container { ..... }
.gradient1 {width:60%; float:left; GRADIENT}
.gradient2 {width:40%; float:left; GRADIENT}