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>
Related
I am using Ionic 6 / Angular and have this html in a component:
<ion-header [translucent]="true">
<ion-toolbar>
<ion-title>
Tab 1
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content [fullscreen]="true">
<ion-header collapse="condense">
<ion-toolbar>
<ion-title size="large">Tab 1</ion-title>
</ion-toolbar>
</ion-header>
<app-explore-container name="Tab 1 page"></app-explore-container>
</ion-content>
In chrome mobile view it looks good but on my mobile I can only see half the header.
Here is a screenshot:
screenshot here
What is the problem?
This element needs a little padding.
You have to add a the variable ion-safe-area-top in the "variables.scss" file.
:root {
...
--ion-safe-area-bottom: 22px;
}
Also you need to add styles for the first ion-toolbar inside ion-header element.
ion-header ion-toolbar:first-of-type{
padding-top: var(--ion-safe-area-top, 0);
}
Not sure what the exact issue is but I was able to resolve it by
Creating a fresh project on v6 -> Copy the files from the old project across to the new -> rebuild the android app and the issue disappeared.
I had the same problem and this solved the issue for me.
As this issue only happens with Andriod, I defined a variabel to detect if the device is Android. If Yes then apply a padding to the header
In app.component.ts
if (this.platform.platforms().includes("android"))
this.isAndroid = true
In app.component.html
<ion-header [translucent]="true" [class]="isAndroid? 'android-header' : ''">
In app.component.css
.android-header {
padding-top: 20px;
}
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’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.