I create scroll into a element, for do this I tried:
.scroll-content {
overflow: hidden;
}
.scrollabe {
overflow-y: scroll;
}
<ion-content>
<ion-grid style="height:100%" *ngIf="plat && ticket">
<ion-row>
<ion-col col-4 padding>
<ticket-info [ticket]="ticket"></ticket-info>
</ion-col>
<ion-col class="scrollabe" col-8 no-margin>
<ticket-acao [ticket]="ticket"></ticket-acao>
</ion-col>
</ion-row>
</ion-grid>
</ion-content>
But this hides my content:
My element
Also, i tried this way:
.scroll-content {
overflow: hidden;
}
<ion-content>
<ion-grid *ngIf="plat && ticket">
<ion-row>
<ion-col col-4 padding>
<ticket-info [ticket]="ticket"></ticket-info>
</ion-col>
<ion-col col-8 no-margin>
<ion-scroll scrollY="true" style="height: 100%;width: 100%">
<ticket-acao [ticket]="ticket"></ticket-acao>
</ion-scroll>
</ion-col>
</ion-row>
</ion-grid>
</ion-content>
and the same issue occurs...
The problem is solved if i decrease the height, but i lose the responsive layout.
So, what is the best way to make that?
Delete style="height: 100%" and both CSS rules you declared in there. The ion-content component will do the scroll for you if ion-grid overflows.
Related
I want to center an element in ionic horizontally with the same margin on the left and right
<div class="tabs-group" class="ion-justify-content-center">
<ion-row>
<ion-col *ngFor="let i of tabsName,let j = index" size="4" (click)="switchToTabs(tabsindicator[j])" [ngClass]="tabs[tabsindicator[j]] ? 'primary-button' : 'secondary-button'">
<ion-grid>
<ion-row>
</ion-row>
<ion-row>
<ion-col>
<b>{{tabsName[j]}} </b>
</ion-col>
</ion-row>
</ion-grid>
</ion-col>
</ion-row>
</div>
ion-justify-content-center ionic CSS class is not applying centering , this is the output :
You have to use ion-justify-content-center on a flexbox node. So either you put display: flex on your wrapper div node, or you just use ion-justify-content-center on <ion-row> like so.
<ion-row class="ion-justify-content-center">
<ion-col>
<b>{{tabsName[j]}} </b>
</ion-col>
</ion-row>
<ion-grid style="height: 100%"> <ion-row justify-content-center align-items-center style="height: 100%; flex-direction: column"> <div text-center> <ion-icon name="images" style="zoom:5.0;" color="medium"></ion-icon> <h4>No Image Found</h4> <p>Looks like there are no converted image available at this moment, Please click <b> <ion-icon name="git-compare" color="medium" style="zoom:2.0;"></ion-icon> </b> button to convert a image</p> </div> </ion-row> </ion-grid>
https://codevampires.com/place-content-horizontally-vertically-in-center-ionic4/
I have an ion-grid and I want the right element to increase its vertical length so it would consume the empty space and has the exact the same vertical length like the two left elements. The only thing I achieved was that the left element increased in horizontal length but this is not what I want to achieve here.
<ion-list>
<ion-card>
<ion-row>
<div class="card-title"> El 1</div>
</ion-row>
</ion-card>
<ion-grid>
<ion-row>
<ion-col>
<ion-card>
</ion-card>
</ion-col>
<ion-col>
<ion-card>
</ion-card>
</ion-col>
</ion-row>
<ion-row >
<ion-col>
<ion-card>
</ion-card>
</ion-col>
<ion-col>
</ion-col>
</ion-row>
</ion-grid>
<ion-list>
For more complex grid layouts than the ones provided by default in ion-grid, you can use CSS-grid-layout -- see docs: Basic Concepts of Grid Layout
For your specific example you would have to set the following:
HTML
<div class="wrapper">
<ion-card class="box1">
<div> box1</div>
</ion-card>
<ion-card class="box2">
<div > box2</div>
</ion-card>
<ion-card class="box3">
<div > box3</div>
</ion-card>
<ion-card class="box4">
<div > box4</div>
</ion-card>
<ion-card class="box5">
<div > box5</div>
</ion-card>
</div>
CSS:
.wrapper {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-auto-rows: 100px;
}
.box2 {
grid-column-start: 2;
grid-row-start: 1;
grid-row-end: 3;
}
Result:
Grid layout screenshot
And of course, now you can easily rearrange or modify all of them by referring to each box's class
And it is a very widely supported featured nowadays (>95%)! https://caniuse.com/#feat=css-grid
However, if you are forced to use ion-grid, one option would be to set two different columns and then occupy the left one with 2 rows, and the right one with 1 row and height set to 100%.
This results in a much more complex and less flexible code, hence I would recommend CSS-layout-grid instead.
To achieve the same result as the image above you would use:
<ion-grid>
<ion-row>
<ion-col>
<ion-row>
<ion-card>
<div> box1</div>
</ion-card>
</ion-row>
<ion-row>
<ion-card>
<div> box2</div>
</ion-card>
</ion-row>
</ion-col>
<ion-col>
<ion-row style="height: 100%;">
<ion-card>
<div> box3</div>
</ion-card>
</ion-row>
</ion-col>
</ion-row>
<ion-row >
<ion-col>
<ion-card>
<div> box4</div>
</ion-card>
</ion-col>
<ion-col>
<ion-card>
<div> box5</div>
</ion-card>
</ion-col>
</ion-row>
</ion-grid>
I am trying to center the avatar to the middle, with the code below but it doesn't work.
I have used this class="ion-align-items-center" that i got from the ionic documents but with no successs.
<ion-grid style ="text-align: center">
<ion-row class="ion-align-items-center" >
<ion-col class="ion-align-items-center" *ngFor="let item of students" >
<!-- <div class= "imageHold" >
<ion-img [src]= "profileImage || item.profileImage"></ion-img>
</div> -->
<ion-avatar class="ion-align-items-center">
<ion-img [src]= "profileImage || item.profileImage"></ion-img>
</ion-avatar>
</ion-col>
</ion-row >
<ion-row style ="text-align: center">
<ion-col>
<ion-button size="small" fill="outline" (click)="chooseProfilePic()" >Choose Profile Photo</ion-button>
</ion-col>
</ion-row>
</ion-grid>
I get this result
add a class in the avatar div.
.avatar{
margin: auto;
}
I want to be able to create a list of items using *ngFor as follows..
Text - Image
Image-Text
Text - Image
Image-Text
<ion-grid>
<ion-row *ngFor="let item of items">
<ion-col col-6 ">
<ion-card ">
<ion-card-content>{{item.name}}
</ion-card-content>
</ion-card>
</ion-col>
<ion-col col-6 >
<ion-card>
<img [src]="item.img"/>
</ion-card>
</ion-col>
</ion-row>
</ion-grid>
However, I am unsure how I could achieve this in a for loop.
Any suggestions? Thanks
Apply flex-direction: row-reverse when the index of the item is odd or even, your choice.
<!--HTML-->
<!--Track the index of each item and apply reverse class if its even or odd (which ever you prefer, just change the comparator)-->
<ion-grid>
<ion-row *ngFor="let item of items; let i = index;" [class.reverse]="i%2 !== 0">
<ion-col col-6>
<ion-card>
<ion-card-content>{{item.name}}
</ion-card-content>
</ion-card>
</ion-col>
<ion-col col-6>
<ion-card>
<img [src]="item.img" />
</ion-card>
</ion-col>
</ion-row>
</ion-grid>
<!--CSS-->
.reverse { flex-direction: row-reverse; }
I need to structure the radio buttons as shown below.
image 1
I have tried as shown below.
.html
<ion-row>
<ion-col col-6>
<ion-grid radio-group formControlName="location">
<ion-row>
<ion-col col-12>
<ion-item *ngFor="let l of locations;let index = index">
<ion-label class="custom-radio">
<ion-radio value="{{index}}"></ion-radio>
<i class="{{l.icon}}"></i><br/> {{l.description}}
</ion-label>
</ion-item>
</ion-col>
</ion-row>
</ion-grid>
</ion-col>
<ion-col col-6>
//other part
</ion-col>
</ion-row>
Then it looks like below.
Can you tell me how to design it looks like image 1?
If you can post your HTML and CSS, then I'd be happy to help with your actual code. However, in principle, you can do something like this;
HTML
<div class="ion-item">
<i class="l-icon"></i>
<span class="l-description">Text below the image</span>
</div>
CSS
.ion-item {
vertical-align: top;
display: inline-block;
text-align: center;
width: 60px;
}
.l-icon {
width: 50px;
height: 50px;
}
.l-description {
display: block;
}