In my <ion-content> element the ionic automatically creates a scroll-content child. How to disable this?
Maybe a pretty ugly workarund would be to add a style rule like
scroll-content {
padding-top: 0px !important;
}
I've checked the documentation, but I can not find how to prevent that <scroll-content> element from being created.
I do had the same problem. Try the following code.
.helllot >.scroll-content {
padding: 0px !important;
}
html
<ion-scroll scrollX="true" style="height:54px;" class="helllot">
<ion-row>
<ion-col width-25>
hello1
</ion-col>
<ion-col width-25>
hello1
</ion-col>
</ion-row>
</ion-scroll>
Related
Lately I am trying to migrate my Ionic 3 project to Ionic 4. Most of the migration is going successful but I keep having problems with my styling.
After some reading I changed a few things to my styling, listed below:
Moved global styling from app.scss to global.scss
Changed theme styling $colors for example to :root { ion-color- ... }
Changed naming of (some) components (ion-navbar to ion-toolbar, button to ion-button, etc.)
Removed page selectors in page-specific styling (so removed page-login { ... } in login.scss)
Though the styling is still not quite right. I am probably still missing some things.
As example I am using my page-specific style for my login page.
In Ionic 3 the style file looked as follows for this page:
page-login {
.content {
background: url('../assets/img/background.png') no-repeat;
background-size: cover;
#logo {
padding-top: 5rem;
}
form {
position: absolute;
bottom: 0;
width: 100%;
.logo-row {
margin-bottom: 40%;
}
.form-inputs {
.label-ios {
width: 60px;
max-width: 60px;
}
ion-icon, .select-ios, ::-webkit-input-placeholder {
color: color($colors, lightGray);
max-width: 100%;
}
.item-ios {
background: transparent;
padding-left: 0;
&:first-child {
border-top: none;
}
.input-wrapper {
padding-left: 50px;
input.text-input.text-input-ios {
color: color($colors, lightGray);
}
}
}
[icon-only] ion-icon {
line-height: 1;
}
}
}
}
}
In my Ionic 4 app I changed it to the following:
ion-content {
--background: url('../../../assets/img/background.png') no-repeat;
--background-size: cover;
#logo {
padding-top: 5rem;
}
ion-form {
--position: absolute;
--bottom: 0;
--width: 100%;
.logo-row {
margin-bottom: 40%;
}
ion-inputs {
.ios ion-label {
--width: 60px;
--max-width: 60px;
}
ion-icon, .select-ios, ::-webkit-input-placeholder {
--color: var(--ion-color-lightGray); //color($colors, lightGray);
--max-width: 100%;
}
.ios ion-item {
--background: transparent;
--padding-left: 0;
&:first-child {
--border-top: none;
}
.input-wrapper {
--padding-left: 50px;
input.text-input.text-input-ios {
--color: var(--ion-color-lightGray); //color($colors, lightGray);
}
}
}
[icon-only] ion-icon {
--line-height: 1;
}
}
}
}
There are a few things which are not styled correctly:
I thought I had to replace the most Ion specific components with ion- in front of it, for content this seems to work but the form targeting this does not seem to work (ion-form), while form (liek it used to be) also doesn't work. Any clues with what I should replace this? Or should I omit the form targeting and just keep it in ion-content?
There is also some html inline styling going on, I don't know if all these styles are still correctly used in Ionic 4? For example, I have read somewhere that I should replace padding text-center with class="ion-padding ion-text-center" but what about the inline col-x and offset-x styles?
My Ionic html login page looks as following:
<ion-header [ngClass]="'no-shadow'">
<ion-toolbar transparent>
<ion-buttons start>
<button ion-button icon-only menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-row class="logo-row" *ngIf="isKeyboardHidden">
<ion-col col-8 offset-2 class="ion-padding ion-text-center">
<img id="logo" src="assets/img/logo-dia-positive.png">
</ion-col>
</ion-row>
<form #f="ngForm" (ngSubmit)="onSubmit()">
<ion-row>
<ion-col>
<p style="height: 16px"></p>
</ion-col>
</ion-row>
<ion-list no-lines class="form-inputs">
<ion-item>
<ion-label icon-only>
<ion-icon name="person"></ion-icon>
</ion-label>
<ion-input
type="text"
name="username"
[(ngModel)]="account.username"
[placeholder]="'USERNAME' | translate"
required></ion-input>
</ion-item>
<ion-item>
<ion-label icon-only>
<ion-icon name="unlock"></ion-icon>
</ion-label>
<ion-input
type="password"
name="password"
[(ngModel)]="account.password"
[placeholder]="'PASSWORD' | translate"
required></ion-input>
</ion-item>
</ion-list>
<ion-row>
<ion-col col-10 offset-1>
<ion-button
block
[disabled]="!f.valid || isLoading">
{{'LOGIN' | translate}}
</ion-button>
</ion-col>
</ion-row>
</form>
</ion-content>
<ion-footer *ngIf="isKeyboardHidden">
<ion-row>
<ion-col class="ion-text-center">
<p class="light-gray">
{{'DEVELOPED_BY' | translate}}
<span class="bold">
<a class="default-text"
href="https://www.my-company.com/"
target="_blank">
My Company
</a>
</span>
</p>
</ion-col>
</ion-row>
</ion-footer>
Any ideas or pointers what I am (still) missing?
Here you can find official migration guide. They have listed all controls which they updated and Breaking changes:
https://github.com/ionic-team/ionic/blob/master/angular/BREAKING.md#breaking-changes
My goal is to achieve this layout for an array of Images:
As you can see, a simple 2 column grid of square images - this is quite easy in a Bootstrap environment where one specifies 2 cols or size 6 each, then simply setting the images' CSS object-fit to cover in order to avoid stretching and setting the height to auto.
Problem is, where I'm trying to achieve this is in Ionic 4 where the img element is a web component and only certain properties are exposed to that can be customized. So far I can get the images displayed in a 2 column fashion but the aspect ratios are off.(Also I HAVE to use the element, so cannot simply use HTML5 img element).
Here is what I have so far:
<ion-grid>
<ion-row>
<ion-col size="6" *ngFor="let image of selectedImageURIs">
<ion-img [src]="image"></ion-img>
</ion-col>
</ion-row>
</ion-grid>
Note: The Ionic Framework has it's own 'Bootstrap' like framework called ion-grid. What I end up with is this:
I know need to get them to be the same in height and with and set the object fit to cover, but how can I do this with an ion-img? I is a web component so the Shadow Dom comes into play. The docs just mention "The component uses Intersection Observer internally". Will that be able to do what I need? I'm new to web components to trying to understand what I'm missing.
Here is a solution that I used for my Ionic 4 app. I used css to accomplish the look you're going for. Your template will look something like this and using ion-img to take advantage of the lazy loading feature.
html
<ion-grid>
<ion-row>
<ion-col *ngFor="let category of categories" size="6">
<button #categoryButton type="button" (click)="selectCategory(categoryButton, category)" class="category-button">
<ion-card padding class="category-card">
<ion-card-content class="category-card-content">
<ion-img *ngIf="!imageNotLoaded; else loadingCategory" src="{{category.icon_image}}" class="category-icon" (ionError)="imageNotLoaded = true"></ion-img>
<ng-template #loadingCategory>
<ion-skeleton-text animated style="height: 70px;width: 70px"></ion-skeleton-text>
</ng-template>
</ion-card-content>
<ion-card-title class="category-title">{{category.name}}</ion-card-title>
</ion-card>
</button>
</ion-col>
</ion-row>
</ion-grid>
Set up your sass code like this.
scss
ion-col {
text-align: center;
}
.active {
.category-card {
border-color: var(--ion-color-primary)!important;
box-shadow: 0 4px 16px var(--ion-color-primary)!important;
}
}
.category-button {
padding: 4px;
background: transparent;
.category-card {
min-width: 100%;
margin: 0;
border: 2px solid;
.category-card-content {
text-align: center;
.category-icon {
width: available;
}
}
.category-title {
font-size: x-small;
font-weight: bolder;
}
}
}
This then yields the final result as this picture below.
Note: this is all component level code other wise you'll need to use ::ng-deep to get around the shadow dom for your css code.
page.html
<ion-row class="row-card">
<ion-col size="6" class="col-card">
<ion-card class="card-service">
<img src="../../assets/images/services/w-medical.png" class="img-service" />
</ion-card>
</ion-col>
<ion-col size="6" class="col-card">
<ion-card class="card-service">
<img src="../../assets/images/services/w-professional.png" class="img-service" />
</ion-card>
</ion-col>
</ion-row>
page.css
.row-card{
padding: 0px 5px 0px 5px;
.col-card{
padding: 0px;
.card-service{
margin: 5px;
height: 160px;
border-radius: 0px;
padding: 8px;
box-shadow: 0px 0px;
.img-service{
height: 100%;
width: 100%;
object-fit: cover;
margin: 0 auto;
border: 0 solid #024f9a;
background: linear-gradient(#0486ca,#024f9a);
border-radius: 50%;
padding: 15px;
font-weight: bold;
}
}
}
}
Here is working one
ion-grid >
<ion-row>
<ion-col col-6 col-md-4 col-xl-3 *ngFor="let image of [1,2,3,4,5,6,7,8,9,10,11]">
<img src=''/>
<!-- <div class="image-container" [style.background-image]="'url(assets/img/' + image + '.jpg)'"></div> -->
</ion-col>
</ion-row>
</ion-grid>
Well, I want to standardize the width equal to the above, but I'm not getting any way ... I've tried margin's, width and others, but none if you want to change the size of the card. I want to leave default, do you recommend me some command or am I doing wrong? all the css commands I did was in home.scss, thank you all.
Watch the print of my app here
page-home {
.bg{
background: linear-gradient(to bottom, #00A399 0%, #fafafa 400%);
}
.bg-ions{
background:#000;
opacity:0.2;
}
.btn{
background:#000;
opacity:0.2;
color:white;
}
ion-input{
color:#FAFAFA;
}
ion-textarea{
color:#FAFAFA;
}
ion-card{
display: flex;
flex-direction: column;
width: 100%;
}
ion-card-content{
margin-left:-2%;
}
ion-item{
width:50%;
}
.summ{
color:#000;
}
::placeholder {
color: white;
opacity: 1; /* Firefox */
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: white;
}
::-ms-input-placeholder { /* Microsoft Edge */
color: white;
}
}
<br>
<ion-header>
<ion-navbar>
<ion-title>
HybridSumm
</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding class="bg">
<ion-item class="bg-ions">
<ion-label class="div-pai" color="primary" stacked>Title</ion-label>
<ion-input placeholder="Ex: The Bio-informatics" style="color:white;"></ion-input>
</ion-item>
<br>
<ion-item class="bg-ions">
<ion-label color="primary" stacked >Text</ion-label>
<ion-textarea placeholder="Place the text that you want to summarize." ngDefaultControl [(ngModel)]="test"></ion-textarea>
</ion-item>
<br>
<button ion-button outline style="background: white">Summarize</button>
<button ion-button>Test</button>
<br><br>
<ion-card>
<ion-card-header>
Card Header
</ion-card-header>
<ion-card-content>
{{test}}
</ion-card-content>
</ion-card>
</ion-content>
Ionic set some properties by default, and the only way to override them, is by giving them the !important rule.
It is maybe not the best practice, but it works, and ionic gives us not very much sass variables to overwrite some things.
It works for me adding this in the following SCSS rules in your code:
ion-card{
display: flex;
flex-direction: column;
width: 100% !important;
margin: 0 !important;
}
I hope it works for you.
On the top of the page, I’ve got a div for which background image has been set. I want to place the fab button on the bottom right edge of this div. Exactly like the following image. How can I do this?
Just use the edge attribute that comes along with fabs:
<ion-fab bottom right edge>
<button ion-fab><ion-icon name="camera"></ion-icon></button>
</ion-fab>
For this to work the div (or any tag) having the fab inside must have position set to relative, absolute or fixed to work, position: inherit may work too depending on parent positioning.
Hope this helps.
Thanks to #Garrett and #Gabriel, I got it working using the following markup and scss. It's important to place the FAB button inside the div to which we want to assign the background image so that we can use relative positioning:
<ion-content>
<div id="header">
<ion-fab bottom right edge>
<button ion-fab><ion-icon name="camera"></ion-icon></button>
</ion-fab>
</div>
</ion-content>
And the scss file:
#header {
background-image: url('../assets/images/anonymous.jpg')!important;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
height: 25vh;
}
ion-fab {
position: relative;
}
ion-fab[bottom][edge] {
bottom: -21vh;
}
.fab {
margin-right: 3vw;
}
Here is what I could get to work.
This works by creating a fab-container that is going to overlay the main container on this page. For this to work you need to know their heights. Then we make the fab-container z-index of 1 to be on top. Then we can use flex to make the fab be in the bottom right. Then we can add a margin-top half the size of the fab to the fab-container to have the fab hover halfway in-between. Lastly we can add margin-right to get the fab off the right side.
This may not be the best way to do it, since it requires knowing the height of your container, but it was the way that I would approach this task.
<ion-content>
<div class="container"></div>
<div class="fab-conatainer">
<ion-fab class="fab">
<button ion-fab>
<ion-icon name="camera"></ion-icon>
</button>
</ion-fab>
</div>
<div class="contacts-container">
<ion-list>
<ion-item>
<ion-input placeholder="Name"></ion-input>
</ion-item>
<ion-item>
<ion-input placeholder="Phone"></ion-input>
</ion-item>
<ion-item>
<ion-input placeholder="Email"></ion-input>
</ion-item>
</ion-list>
</div>
</ion-content>
CSS
.container {
width: 100%;
background: #333;
height: 500px;
}
.fab-conatainer {
display: flex;
justify-content: flex-end;
align-items: flex-end;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 500px;
z-index: 1;
margin-top: 28px;
}
.fab {
margin-right: 14px;
}
I'm trying to align text in Html but it doesn't work and I do not know why. I'm using Ionic Framework.
My code is:
<ion-list>
<ion-item>
<b>Name</b> <p align="right"> {{paciente.name}}</p>
</ion-item>
....
</ion-list>
and it looks like this:
but I want all text int the same line, and I do not know how to get that.
See this demo: http://play.ionic.io/app/b477ea2f5623
In ionic items, if you write any text within span with item-note class then it will be aligned to right.This is built in class by ionic, your code will be like this :
<ion-item>
<b>Name</b> <span class="item-note"> {{paciente.name}}</span>
</ion-item>
See more tricks with ionic items provide by built in classes, see this Documentation
Add a css class as
.item {
position: absolute;
right: 0px;
width: 300px;
padding: 10px;
}
The p tag creates a paragraph on a new line, so you need an other element. You could use a span element which is floated right:
Html:
<ion-list>
<ion-item>
<b>Name</b> <span class="right"> {{paciente.name}}</span>
</ion-item>
....
</ion-list>
Css:
.right {
float: right;
}
Apply the ckass to all items you want to be on the right.