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
Related
I need your help. I want to make the same header for all my application, so in app.component.html I prescribe ion_toolbar and ion-header before ion-router-outlet. However, I have a problem that this header of mine overlaps the content I have in the ion-router-outlet. I'm trying for the ion-toolbar to give margin-bottom: auto so that there are automatic deviations, but it doesn't react to that. Tell me, what is my mistake, how to make a hat and that it does not overlap the content? Thanks
app.component.html
<ion-app>
<ion-toolbar>
<ion-header>
<div>header</div>
</ion-header>
</ion-toolbar>
<ion-router-outlet></ion-router-outlet>
</ion-app>
app.component.scss
ion-toolbar {
height: 75px;
--margin-bottom: auto;
}
I am using Ionic 4. On my Login Page whenever keyboard is pressed, background image scrolls up. I found no workaround until now.
I applied below css to ion-content:
ion-content{
--background: #fff url('/assets/img/bigscren.jpg') no-repeat center center / cover !important;
--background-size: cover !important;
--background-attachment: fixed;
}
This is my front page:
<ion-content padding>
//My Content
</ion-content>
I also applied fixed attribute to ion-content (from latest ionic doc) but that also not working.
Please help me out. Thanks!
I want the user to be able to click and drag the scrollbar on the side of the screen while using my ionic app. Is this possible?
Ionic has a built in component called ion-scroll. It does what you have described and more. You can implement it inside your HTML like so.
<ion-scroll
scrollX="true"
scrollY="true">
</ion-scroll>
For me the solution was to add isBrowser variable to the controller which determined if this is mobile (no scroll bar) or desktop (draggable scrollbar).
<ion-content data-ng-class="{ isBrowserView : appCtrl.isBrowser }"
overflow-scroll="{{ appCtrl.isBrowser }}">
...
</ion-content>
And I added the following to me scss file:
.isBrowserView {
overflow-y: auto !important;
}
.isBrowserView .scroll-bar-indicator {
display: none;
}
*If you always want the scrollbar then do not worry about setting the value on a controller. Like so:
<ion-content class="isBrowserView"
overflow-scroll="true">
...
</ion-content>
I have a page that scrolls, and I want to add a fixed div to the bottom of it in ionic2. I use the ion-fixed, and it works great on android devices staying fixed in the bottom of the page, but on iOS upon scrolling the page, it sort of jumps all the time until get the position.
I am sure someone working in ionic has forced the same issue.
I have tried to detect platform and to use a css tweak of
position: sticky;
and it moves smootly, but I am facing another bouncing issue once you are in the end of the page ( the native over-scroll ios behavior, if you continue to scroll the page from the top or the bottom area).
If you want to place a div in the bottom of the page, fixed, the best way to do it in Ionic is to put that div outside of the ion-content:
<ion-header>
<!-- ... -->
</ion-header>
<ion-content>
<!-- ... -->
</ion-content>
<div class="fixed">
<!-- ... -->
</div>
And then use some css style rules to set its position according to your needs:
div.fixed {
position: fixed;
bottom: 0px;
left: 0;
width: 100%;
z-index: 999
}
Since it's outside of the content, it will be ignored by Ionic during the scroll event.
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>