I am using ionic 3.
<ion-header>
<ion-navbar>
<ion-title>{{ title }}</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
</ion-content>
<ion-footer>
<ion-title>
{{ title }}
</ion-title>
</ion-footer>
What ever I put in "ion-content" there is no scroll when content overcome height of the screen.
I tried with grid in content:
<ion-grid>
<ion-row>
<ion-col col-6>
<ion-label>Some label</ion-label>
<div>Some text</div>
</ion-col>
<ion-col col-6>
<ion-label>Some label</ion-label>
<div>Some text</div>
</ion-col>
<ion-col col-12 class="left-col">
<ion-label>Some label</ion-label>
<div>Some text</div>
</ion-col>
</ion-row>
</ion-grid>
Also tried with list:
<ion-list>
<ion-item>Item 1</ion-item>
<ion-item>Item 2</ion-item>
<ion-item>Item 3</ion-item>
...
</ion-list>
Nothing works. What is the catch here ?
I think this should be handled automatically by Ionic.
To enable vertical scroll to your page or any other container, there is a tag called
<ion-scroll scrollY="true">
// your content here
</ion-scroll>
To enable horizontal scroll, just change scrollY=true to scrollX=true
in your sass file add the following :
ion-scroll {
white-space: nowrap;
height: 500px;
}
The real problem is that ionic global CSS property was overridden in the project.
"scroll-content" class must not be changed in project styles.
You can use 'ion-list' property in CSS and change this:
ion-list
{
overflow-y: scroll;
};
Also, if doesn't change yet, you can put '!important' after, like this:
ion-list
{
overflow-y: scroll !important;
};
Related
I want the ion-card to have a specific size and the ion-card-content to fit the ion-card.
Happens that inside ion-card-content I have an image that doesn't fit the ion-card sizes (height more precisely).
Here is the code:
<ion-content>
<ion-row *ngFor="let card of cardData">
<ion-col>
<ion-card style="height: 150px;">
<ion-card-title>{{card.cardTitle}}</ion-card-title>
<ion-card-content >
<ion-img [src]="card.cardImageSrc"></ion-img>
</ion-card-content>
</ion-card>
</ion-col>
</ion-row>
<ion-infinite-scroll threshold="100px" (ionInfinite)="loadMoreData($event)">
<ion-infinite-scroll-content loadingSpinner="bubbles" loadingText="Loading more data...">
</ion-infinite-scroll-content>
</ion-infinite-scroll>
</ion-content>
And this is the result
I don't want the images to be cropped. I want them to fit the card no matter the size of the card. Already tried a lot of solutions found online but no one seems to work, since ion-card-content is always bigger than the ion-card
Since you have set the height attribute on <ion-card> to 150px, then you have to set the height attribute on <ion-img> to a value less than 150px (i.e 100px, Since you also have the title inside the ion-card).
Your code will be like the following
<ion-content>
<ion-row *ngFor="let card of cardData">
<ion-col>
<ion-card style="height: 150px;">
<ion-card-title>{{card.cardTitle}}</ion-card-title>
<ion-card-content >
<ion-img [src]="card.cardImageSrc" style="height: 100px;"></ion-img>
</ion-card-content>
</ion-card>
</ion-col>
</ion-row>
<ion-infinite-scroll threshold="100px" (ionInfinite)="loadMoreData($event)">
<ion-infinite-scroll-content loadingSpinner="bubbles" loadingText="Loading more data...">
</ion-infinite-scroll-content>
</ion-infinite-scroll>
</ion-content>
I have an ionic clickable icon (svg) and I placed it in a button. I set the fill to clear because I only want that the point cursor appears. The icon is in a grid on a cell.
Without the button around it looks correctly like this
With the button around it looks like that
The row is defined in this way. I set no-padding because in the next row I have more icons and the padding should be minimal.
<ion-row no-padding>
<ion-col></ion-col>
<ion-col ion-item no-lines no-padding text-center (click)="cmbAButton.open()">
<ion-button icon-only fill="clear" >
<ion-icon class="big" src="/assets/{{aSelectedIcon}}.svg"></ion-icon>
</ion-button>
</ion-col>
<ion-col></ion-col>
</ion-row>
In scss I have
ion-icon {
&.big {
width: 40px;
height: 40px;
}
I have the following code:
<ion-button expand=“full” (click)=“do()“>
<ion-icon name=“cart” slot=“start”></ion-icon>
TEXT
</ion-button>
I want the content (the TEXT and the ion-icon) to be aligned to the left and tried:
ion-button {
display: flex;
justify-content: flex-start;
}
I thought this would result into aligning the content to the left but nothing happens. It seems that the css is totally ignored.
You can align the text and icon to the left if you add a div inside your button and use Ionic 4 CSS Utilities (in your case text-left / text-start).
<ion-button expand=“full” (click)=“do()“>
<div text-left>
<ion-icon name=“cart” slot=“start”></ion-icon>
TEXT
</div>
</ion-button>
Make sure to give the div the full width of the button
ion-button > div {
width: 100%;
}
Documentation:
Ionic 4 CSS Utilities
Wrap your inner in span and add in css
.inner-span{
margin-left:auto;
}
As below (use " instead “)
<ion-button expand="full" (click)="do()">
<span class="inner-span">
<ion-icon name="cart" slot="start"></ion-icon>
TEXT
</span>
</ion-button>
See working code
I am building IONIC app and made a card layout as below.
<ion-content padding>
<ion-card *ngFor="let book of booksData.books; let i=index">
<ion-row>
<ion-col col-3>
<ion-avatar item-start>
<img src="/../../img/authorImage.png">
</ion-avatar>
</ion-col>
<ion-col col-7>
<ion-card-header>
#{{i+1}}
</ion-card-header>
<ion-card-content>
<p>{{book.text}}</p>
<p>{{book.person}}</p>
</ion-card-content>
</ion-col>
<ion-col col-2>
<ion-row>
<ion-icon name="thumbs-up"></ion-icon>
</ion-row>
<ion-row>
<ion-icon name="thumbs-down"></ion-icon>
</ion-row>
</ion-col>
</ion-row>
</ion-card>
</ion-content>
The card is splitted into three columns (as expected), how ever I am facing the below issue
The thumbs up and thumbs down icon are displaying but not taking the full available height . instead they are taking a fraction area of the column only. How can I make sure that the two icons take half the width of the Row of that specific column.
Any inputs on how to fix this please.
Okay so this is how you can solve both your problems, here's the code for your page:
<ion-card *ngFor="let book of booksData.books; let i=index">
<ion-row>
<ion-col col-3>
<ion-avatar item-start>
<img src="./assets/img/authorImage.png">
</ion-avatar>
</ion-col>
<ion-col col-7>
<ion-card-header>
#{{i+1}}
</ion-card-header>
<ion-card-content>
<p>{{book.text}}</p>
<p>{{book.person}}</p>
</ion-card-content>
</ion-col>
<ion-col col-2>
<ion-icon name="thumbs-up"></ion-icon>
<ion-icon name="thumbs-down"></ion-icon>
</ion-col>
</ion-row>
</ion-card>
And this is the css for your page
.col[col-2] {
display: grid;
ion-icon {
display: flex;
font-size: 2em;
align-self: center;
justify-self: center;
}
}
Let's go through the code:
For the image you'll need to add the path relative to your index.html file, since an Ionic app is simply an SPA (Single Page App) so every page is served as it was part of your index.html. The same works for images rendered though javascript files and CSS.
For your thumbs up buttons you first need to remove the rows from the HTML, they doesn't need to be inside of a row.
Then you can manipulate it with CSS, apply a display: grid to your col element with the col-2 attribute, if you want you can change it to a class or ID and use something like <ion-col col-2 class="thumbs-col">...</ion-col> and change the CSS selector to .thumbs-col instead of .col[col-2].
The display grid is enough to separate into 2 equal rows, but if by any reason it desn't separate this way just add grid-auto-flow: row; to your col selector.
For the icon i added a code so it can center the icon both vertically and horizontally with flexbox. For the size since the icon is not an image, but an SVG, you'll need to manipulate it's size with font-size and not height/width. If you change to a button with an icon, for an example, then you can use height/width.
Hope this helps.
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