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!
Related
I wonder if there is a way to be able to scroll to the rest of the background-image since i've been using background-size : cover; and the background i'm using is way bigger than the screen.
You can apply it with the CSS class or style on ion-content tag editing height of background-size to size in pixels(background-size: 100% 902px), like:
<ion-content style="background: url('../assets/img/bg.jpg') no-repeat;background-size: 100% 902px;" padding>
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'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 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.
We have just upgraded from Ionic beta 14 to the Ionic 1.0.0 release. After the upgrade we have one issue left which I can't solve.
I have added 2 CodePens to show the problem, being:
1.0.0-beta.14: http://codepen.io/anon/pen/LVxxzM
1.0.0: http://codepen.io/anon/pen/rVjjYJ
<ion-modal-view style="width: 50%;">
If you look at the 1.0.0-beta.14 CodePen and open the modal by hitting the button top right and you make your browser view smaller than 680px you will see that the modal still has a dark background around it.
Do the same with the 1.0.0 CodePen en you will see the dark background color is gone. Any ideas howto fix this?
Add the following to your CSS:
#media (max-width: 680px) {
.active .modal-backdrop-bg {
opacity: .5;
transition: opacity 300ms ease-in-out;
background-color: #000;
}
}