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.
Related
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’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 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>
In my application I've got an ItemReorder as described in the docs:
<ion-list reorder="true">
<ion-item *ngFor="let item of items">{{ item }}</ion-item>
</ion-list>
It works as intended, I can drag the ion-items by pointing at the reoder icon (see freehand circle):
Testing with potential users on a tablet I found out, many users don't see the icon at first and/or try to drag the ion-item without pointing at the icon. They expect the whole ion-item to be draggable:
How can I implement this? Any insight is appreciated!
I've already checked the docs twice, googled and found this unanswered question on the ionic forum and this plugin for Ionic v1. I also scanned the code on Github without success.
The ideea of this css solution is to have the reorder icon invisible above the zone which you want to reorder. I have changed the icons to be on the right side <ion-list side="start" and I have changed the css like this
Now for me it's working.
ion-reorder{
position: absolute;
width: 22%;
max-width: 100%;
opacity: 0;
}
The cons is that there is no more visible reorder icons.
I am writing a simple program for iPhone using jQuery mobile, I have created a div with number of images but the scroller that is coming is vertical which I don't want. I want vertical space to be fixed and overflow of images horizontally. I know there a re scrolling plugin like iScroll but in my case I cant use them because those scrolling plugins uses <li> with fixed number of elements to be showed on that page but I want to keep this dynamic, if user rotates his device horizontally then more images can fit in the screen so I want that adjustment that if user keep his device vertical then horizontally there is less space so images should scroll horizontally but if he rotates device horizontally then he gets more space horizontally and more images can fit in and leftover images will again scroll horizontally.
I fixed the height of div and tried overflow property to let images flow horizontally but I guess jQuery is preventing that behavior.
can you please put me on correct path.
I think you could still use iScroll for horizontal scrolling, but you need to call refresh method whenever the content dimensions change. In your case, you could listen to the orientationchange event and perform in that case refresh of your iScroll object.
Check the section "Mastering the refresh() method" in iScroll documentation.
Hope it helps!
EDIT. You can start testing with a quick example like this:
<div data-role="page" id="loadPage">
<div data-role="content">
Add text
<div id="scroller" style="border: 1px solid green; white-space: nowrap; width: 300px;">
<div id="text" style="border: 1px solid red; height: 20px; width: 0px;"></div>
</div>
</div>
<script type="text/javascript">
var iscrollPage = null;
$('#loadPage').bind('pagebeforeshow', function () {
iscrollPage = new iScroll($('#scroller').get(0), { vScroll: false, hScroll: true });
});
function addText() {
$('#text').append((new Date()).getTime()).css('width', '+=140');
iscrollPage.refresh();
}
</script>
</div>