You can see that there is a tiny scroll bar as shown below.Can you tell me how to remove that? This is Ionic 3 app. I have tried many ways.But no luck yet.
Please see how bad it is on the device :(
This on the browser:
.sass
.height-70 {
height: 70px;
overflow: hidden;
}
.html
<ion-content padding>
<ion-grid>
<ion-row>
<ion-col class="height-70" col-12>
<ion-content>
<button ion-button icon-left full (click)="loginWithLinkedin()" class="background-color-linkedin"><ion-icon name="logo-linkedin" class="margin-top-minus-4"></ion-icon><span>Continue with Linkedin</span></button>
</ion-content>
</ion-col>
</ion-row>
</ion-grid>
</ion-content>
Chrome css(run time): below padding:16px is the problem.But how can I remove it? Because I need padding too.Any workaround?
.scroll-content {
overflow-y: hidden;
}
If you use ion-content inside ion-col it will add some properties from scroll-content. Replace ion-content with div and manually add all the css properties you want to your div.
Try like this file app.scss under /src/app/
[scrollbar-y-auto] .scroll-content {
overflow-y: false !important;
}
and
Your code :
<ion-content scrollbar-y-auto>
Not tested Check and let me know
Try out the following,
<ion-content overflow-scroll="false">
1.bounce,
<ion-content no-bounce></ion-content>
2.
.content > .scroll-content::before {
bottom: 0;
}
.content > .scroll-content::after {
top: 0;
}
3.
.scroll-content {
overflow-y: auto !important;
}
4.
<ion-content>
<div ion-fixed>
</div>
</ion-content>
What I have experienced is sometimes you see scrollbar in browser but not on device. I would suggest to you to verify the same in device or try chrome device emulator in dev tools by pressing Ctrl+Shift+M.
Related
I'm creating a hybrid mobile app using Ionic and for one page I'm trying to have swipe-able cards that sit on top of a map, similar to in the TripAdvisor app. I'm new to all of this so really struggling with this one.
TripAdvisor example
I'm using Angular Google Maps to create the map in an <agm-map> element. And Ionic's ion-slides element with ion-card in each ion-slide to create the sliding cards. I want the map to fill the entire content area. So far I have the map and the slides sitting below it, but I can't figure out how to get them to sit on top of it. I've tried playing around with positioning like suggested here: How to float a div over Google Maps? but that seems to mess up the cards widths and heights or make the map disappear completely.
I tried to recreate on stackblitz but couldn't get the map to load, but will share anyway so you can see the code (you'll need to add your own Google Maps API key in app.module.ts)
https://stackblitz.com/edit/ionic-qgapmk
Any help would be appreciated, like I said it's all pretty new to me so happy to learn!
home.html code:
<ion-header>
<ion-navbar>
<ion-title>
Slides Overlay
</ion-title>
</ion-navbar>
</ion-header>
<ion-content>
<agm-map [latitude]="51.507692" [longitude]="-0.127718">
</agm-map>
<ion-slides loop centeredSlides slidesPerView="auto">
<ion-slide *ngFor="let slide of scenes; let i = index">
<ion-card>
<img [src]="cat" class="slide-image">
<ion-card-content>
<h2>
Heading {{i}}
</h2>
<h3>Sub-heading {{i}}</h3>
</ion-card-content>
</ion-card>
</ion-slide>
</ion-slides>
</ion-content>
home.scss code:
page-home {
agm-map {
height: 100%;
}
.swiper-slide{
width: 70% !important;
}
.slide-image {
height: 100px;
width: 100%;
object-fit: cover;
}
ion-card {
height: 160px;
}
ion-card-content, .card-content-md{
text-align: left;
padding: 0 0 0 3px;
}
}
This is how I did it in the end; made the map 100% height and added a minus top margin to the ion-slides:
agm-map {
height: 100%;
}
ion-slides {
height: 175px;
margin-top: -175px;
}
I recently updated my Ionic 2 project to Ionic 3, and the changes to ion-slides have broken my app.
Specific widths are being set in the style tags on the slides when the app loads, and it's breaking my styles.
This is what I have in my HTML:
<ion-slides pager>
<ion-slide *ngFor="let image of offer.Gallery">
<img [src]="image.Url"/>
</ion-slide>
</ion-slides>
And this is how it renders:
<ion-slides pager="" class="slides slides-md slides-43" ng-reflect-pager="">
<div class="swiper-container swiper-container-horizontal"><div class="swiper-wrapper">
<ion-slide class="swiper-slide swiper-slide-active" style="width: 171px;">
<div class="slide-zoom">
<img src="IMG">
</div>
</ion-slide>
</div>
... Pagination ...
</ion-slides>
You'll notice that somehow the ion-slide tag has a style="width: 171px;" set on it. What is causing this and is there a way to turn it off?
you can address the ion tags directly in Ionic 3!
A more dynamic solution would be using unset value for it.
Just try to write in your yourpage.scss:
ion-slide {
width: unset !important;
}
and it should remove it!
If it is not the width you need then just change it as shown below.
Note: There are No Saas variables for this
your-page.scss
.md,
.ios,
.wp {
.swiper-slide .swiper-slide-active{
width: 100px;//your width here
}
}
Note: If above was not working then you must use width: 100px !important;. No other option where I can think of.
Try this:
ion-slide >:first-child {
width: 100%;
}
The slidesPerView option defaults to 1; to show more slides at a time, increase this in your slider options.
HTML:
<ion-slides pager [options]="slideOpts">...
typescript:
slideOpts:any = {slidesPerView: 7}
i am building a website and the form has input with label. They seems to have too my height and i am unable to figure out how to reduce it. the code looks like
<ion-grid>
<ion-row>
<ion-col text-right><ion-item no-lines><ion-label class="fa-labels">Name</ion-label><ion-input placeholder="Infrastructure Information" value="Infrastructure Information"></ion-input></ion-item></ion-col>
<ion-col><ion-item no-lines><ion-label class="fa-labels">Close Date</ion-label><ion-input value="7/15/17"></ion-input></ion-item></ion-col>
</ion-row>
<ion-row>
<ion-col text-right><ion-item no-lines><ion-label class="fa-labels">Account</ion-label><ion-input value="Net-World Technologies"></ion-input></ion-item></ion-col>
<ion-col><ion-item no-lines><ion-label class="fa-labels">Status</ion-label><ion-input value="Open"></ion-input></ion-item></ion-col>
</ion-row>
</ion-grid>
applied css
ion-input {
border: 0.5px solid #BCC0C2;
margin: 0px;
padding:0px;
}
doing a padding or margin didnt help to 0px.
Try this:
<ion-input class="ioninput"> <ion-input>
And in CSS:
.ioninput{
input{
height:xx px;
}
}
If I am understanding the docs correctly, you need to style using classes and not by selecting elements themselves. So...
<ion-input class="input" ...></ion-input> and .input { padding: 0; margin: 0; }
This is ionic2 showing in iPad
This is showing in Iphone 6 plus
page.html
<ion-content color="danger">
<div padding class="about-button">
<a ion-button color="light" href="tel:123456">
立即拨打
</a>
</div>
</ion-content>
page.scss
.about-button {
text-align: center;
background-color: #F44336;
}
I don't why in Ipad showing some white screen at the bottom
How can I set the button at the bottom of the page.
First time use ionic, can ionic set something to access all device screen?
Finally, I found the problem.
page.html
<ion-content color="danger">
<div padding class="about-button">
<a ion-button color="light" href="tel:123456">
立即拨打
</a>
</div>
</ion-content>
ion-content cannot use color="danger", change it to <ion-content class="bg-style"> and change scss file also.
page.scss
.bg-style {
background: #F44336;
}
By this way to solve white screen at bigger size devices
I have an Ionic >=2 application where I would like to have 2 or 3 fixed rows at the top of the page, and then have the rest of the page as a scrollable list (and later I want it to be virtual, but just want to get the simple list working forst).
As a simplified example, I have the following plunk. The markup repeated here is..
<ion-header>
<ion-navbar>
<ion-title>{{ appName }}</ion-title>
</ion-navbar>
</ion-header>
<ion-content scroll=false>
<ion-grid>
<!-- Row 1 fixed at top -->
<ion-row>
<ion-col>
<ion-searchbar></ion-searchbar>
</ion-col>
<!-- Other cols -->
</ion-row>
<!-- Row 2 Scrollable list -->
<ion-row>
<ion-col>
<ion-list>
<ion-item *ngFor="let item of data">
<div>{{item}}</div>
</ion-item>
</ion-list >
</ion-col>
</ion-row>
</ion-grid>
</ion-content>
The problem is the search bar also scrolls with the list, whereas I would like this to always remain visible at the top of the page.
Does anyone know why I have the search bar also scrolling when this is in a completely separate row to the ion-list? Should I be using an ion-grid in this way?
Thanks in advance for any help!
ion-content does not have scroll input property to disable it.
If you need to have searchbar always visible, I suggest you place it in a toolbar.
<ion-header>
<ion-navbar>
<ion-title>{{ appName }}</ion-title>
</ion-navbar>
<ion-toolbar>
<ion-searchbar></ion-searchbar>
</ion-toolbar>
</ion-header>
Or use ion-scroll with a fixed height.
<ion-grid>
<!-- Row 2 Scrollable list -->
<ion-row>
<ion-col>
<ion-searchbar></ion-searchbar>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<ion-scroll style="width:100%;height:100vh" scrollY="true">
<ion-list scroll="true">
<ion-item *ngFor="let item of data">
<div>{{item}}</div>
</ion-item>
</ion-list>
</ion-scroll>
</ion-col>
</ion-row>
</ion-grid>
Sample Plunkr
Update: To answer #JohnDoe's comment.. in order to get scroll list to take the height of rest of the screen use Viewport percentage height to set the height of ion-scroll.
This is how I managed to have a list at the bottom of the page scroll without scrolling the whole page:
HTML
<ion-content>
<div class="table">
<div class="table-row">
<ion-searchbar></ion-searchbar>
</div>
<div class="table-row last-row">
<div class="table-cell cell-content-outer-wrapper">
<div class="cell-content-inner-wrapper">
<div class="cell-content">
<ion-list>
<ion-item *ngFor="let item of data">
<div>{{item}}</div>
</ion-item>
</ion-list>
</div>
</div>
</div>
</div>
</div>
</ion-content>
CSS
.table {
display: table;
width: 100%;
height: 100%;
}
.table-row {
display: table-row;
}
.table-cell {
display: table-cell;
}
.last-row {
height: 100%;
}
.cell-content-outer-wrapper {
height: 100%;
}
.cell-content-inner-wrapper {
height: 100%;
position: relative;
overflow: auto;
}
.cell-content {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
Makes use of lots of divs but it worked for me in ionic 2 and in onsen-ui as well when I was facing the same problem.
I'm using Ionic 5 with Vue. I wanted to have a fixed content at the top of the page with a scrollable list below. This is all I had to do:
<ion-page>
<ion-header :translucent="true">
<ion-toolbar>
<ion-buttons slot="start">
<ion-back-button defaultHref="/"></ion-back-button>
</ion-buttons>
<ion-title>Page title</ion-title>
</ion-toolbar>
</ion-header>
<ion-card>
<ion-card-content>
<!-- Here is the fixed content -->
</ion-card-content>
</ion-card>
<ion-content>
<!-- This content will scroll -->
<ion-list>
<ion-item>
<ion-label>Pokémon Yellow</ion-label>
</ion-item>
<ion-item>
<ion-label>Mega Man X</ion-label>
</ion-item>
<ion-item>
<ion-label>The Legend of Zelda</ion-label>
</ion-item>
<ion-item>
<ion-label>Pac-Man</ion-label>
</ion-item>
<ion-item>
<ion-label>Super Mario World</ion-label>
</ion-item>
</ion-list>
</ion-content>
</ion-page>
The trick was in putting the fixed content between <ion-header> and <ion-content> components.
I've made an npm packge that create this fixed scroll.
You need to install and use the npm package on your project (ionic3)
npm install --save ionic2-fixedscroll-directive
Import the ngFixedScrollDirective module on your page or AppModule
import { NgFixedScrollModule } from 'ionic2-fixedscroll-directive';
#NgModule({
declarations: [
MyPage
],
imports: [
IonicPageModule.forChild(MyPage),
NgFixedScrollModule
],
entryComponents: [
MyPage
]
})
export class MyPageModule {}
Create the SASS CSS to fix the element
your-page {
ion-searchbar {
&.fixed {
#extend .toolbar; //optional
position: fixed;
top: 0;
transition: all 0.5s ease;
&.searchbar-ios {
transform: translateY(calc(#{$navbar-ios-height} + #{$cordova-ios-statusbar-padding}));
}
&.searchbar-md {
transform: translateY(#{$navbar-md-height});
}
&.searchbar-wp {
transform: translateY(#{$navbar-md-height});
}
z-index: 3; //zindex to put it on top of some ionic components
}
}
}
And add the directive to the component or element that you need to fix on top of the page (outside the toolbar)
<YourComponent fixed-scroll></YourComponent>
More info on the directive git repo: https://github.com/joao-gsneto/ionic2-fixedscroll-directive