I'm trying to move my cards to the left to eliminate the space in the left margin.
I can't seem to move the cards closer to the left to eliminate the space in the left margin.
And I'm trying to add the title next to the avatar and the description at the bottom.
<ion-item *ngSwitchDefault>
<ion-card-content style="margin-left: 1px;" class="lists">
<ion-list *ngFor="let topic of groupTopics">
<ion-card style="width: 280px; height: 150px; margin: 1px; margin-left: 2px;" [ngSwitch]="topic.photoUrl">
<ion-avatar *ngSwitchDefault slot="start">
<img [src]="topic.photoUrl" />
</ion-avatar>
<ion-avatar *ngSwitchCase="'false'">
<img src="assets/img/add-an-image.png" />
</ion-avatar>
<ion-label>
<h2>{{topic.title}}</h2>
<p>{{topic.description}}</p>
</ion-label>
</ion-card>
</ion-list>
</ion-card-content>
</ion-item>
Related
<ion-item lines="none" class="ion-text-center">
<ion-avatar slot="start" *ngFor="let mId of headerMemberIds;let i = index" class="member-{{i}}">
<img [src]="profilePhotoUrl$[mId] | async">
</ion-avatar>
<ion-avatar slot="start" class="avatar" *ngIf="allMemberIds?.length>3">
<div class="remaining-members">+{{allMemberIds?.length-2}}</div>
</ion-avatar>
</ion-item>
Any clue about how to center the content inside the ion-item and of course my use case above?
Generated css on the browser
.ion-text-center, [text-center] {
text-align: center !important;
}
You should use class="text-center" and define the class like that :
.text-center {
text-align: center;
}
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;
}
In order to make a page with sliding tabs in ionic 3 , I had tried an example from the internet to reach to my aim >> (sliding tabs)
It is work correctly and nice but the content of each tab align in the center of the page and I don't want it act like that , I want the content start from the beginning of the page like normal .
I have been search and tried to change that but I couldn't find the part of code which make content of a tab align at the center of page .
This is my HTML code :
<ion-header >
<ion-navbar>
<ion-title>
Latest Addition
</ion-title>
</ion-navbar>
</ion-header>
<ion-content>
<ion-segment class="SwipedTabs-tabs" >
<ion-segment-button *ngFor='let tab of tabs ; let i = index ' value="IngoreMe" (click)="selectTab(i)"
[ngClass]='{ "SwipedTabs-activeTab" : ( this.SwipedTabsSlider && ( this.SwipedTabsSlider.getActiveIndex() === i || ( tabs.length -1 === i&& this.SwipedTabsSlider.isEnd()))) }' >
{{tab}}
</ion-segment-button>
</ion-segment>
<!-- here is our dynamic line "indicator"-->
<div id='indicator' class="SwipedTabs-indicatorSegment" [ngStyle]="{'width.%': (100/this.tabs.length)}"></div>
<ion-slides #SwipedTabsSlider (ionSlideDrag)="animateIndicator($event)"
(ionSlideWillChange)="updateIndicatorPosition()"
(ionSlideDidChange)="updateIndicatorPosition()"
(pan)="updateIndicatorPosition()"
[pager]="false"
>
<ion-slide padding>
<ion-list>
<ion-item *ngFor="let a of adminL">
<ion-thumbnail item-start>
<img [src]="a.image"/>
</ion-thumbnail>
<ion-card color="k1">
<ion-card-header>
{{a.name}} in {{a.city}} city
</ion-card-header>
<ion-card-content>
{{a.address}} <br>
{{a.description}} <br>
</ion-card-content>
</ion-card>
</ion-item>
</ion-list>
</ion-slide>
<ion-slide>
<ion-list>
<ion-item *ngFor="let l of latest">
<ion-thumbnail item-start>
<img [src]="l.image1"/>
</ion-thumbnail>
<ion-card color="k2">
<ion-card-header>
{{l.user}} add :
</ion-card-header>
<ion-card-content>
{{l.title}} <br>
{{l.description}} <br>
{{l.city}} <br>
{{l.date}}
</ion-card-content>
</ion-card>
</ion-item>
</ion-list>
</ion-slide>
<ion-slide>
<ion-list>
<ion-item *ngFor="let j of jobs">
<ion-card color="k2">
<ion-card-header>
{{j.cat}} in {{j.country}} with {{j.salary}} salary
</ion-card-header>
<ion-card-content>
{{j.job}} <br>
{{j.email}} <br>
{{j.phone}} <br>
{{j.date}}
</ion-card-content>
</ion-card>
</ion-item>
</ion-list>
</ion-slide>
<ion-slide>
<ion-list>
<ion-item *ngFor="let n of news">
<ion-card color="k2">
<ion-card-header>
{{n.cat}} new from {{n.country}}
</ion-card-header>
<ion-card-content>
{{n.new}} <br>
{{n.date}}
</ion-card-content>
</ion-card>
</ion-item>
</ion-list>
</ion-slide>
</ion-slides>
</ion-content>
And this is my CSS code :
page-test {
.SwipedTabs-indicatorSegment
{
-webkit-transition: 0.3s all;
-moz-transition: 0.3s all;
-o-transition: 0.3s all;
transition: 0.3s all;
transform-origin: top 0 left 0;
height: 1px;
position: relative;
top: -2px;
background-color: black !important;
}
.SwipedTabs-tabs ion-segment-button
{
border:none !important;
color:gray!important;
background-color:white!important;
}
.SwipedTabs-tabs ion-segment-button.SwipedTabs-activeTab
{
color:black !important;
}
.SwipedTabs-tabs
{
border-bottom: solid 1px #e6e6e6 !important;
}
}
how can I make the content of the tab start from the start of page not at the center ?
how can I solve that ? where is the related code ?
I want to fill the left side and the right side of an ion-list with different Weatherdata of different countries. I hope someone can help me. I have been looking for a solution for hours.
CLICK HERE FOR THE GUI OF THE APPLICATION
THIS IS THE GUI OF THE GUI
This is how my code looks like for the selection of the ion-list:
<ion-view title="Termine" hide-nav-bar="true" id="page3" style="background-color: rgb(220, 220, 224);" >
<ion-nav-buttons side="right">
<button class="button button-icon icon ion-plus-round"></button>
</ion-nav-buttons>
<ion-content padding="true" class="manual-ios-statusbar-padding">
<div ng-controller="WeatherBerlinCtrl">
<!-- WEATHER SECTION -->
<ion-list id="termine-list">
<ion-item class="item-thumbnail-left" id="termine-list-item46"style="">
<img src={{vWeatherLinkIcon}}>
<h2 style="text-align: left; width:49%; display: inline-block; font-weight: bold;">Berlin {{vWeatherActDegrees}} °C</h2>
<!-- <img style="float: right;" src={{vWeatherLinkIcon}}> -->
<h2>Max: {{vWeatherMaxDegrees}} °C</h2>
<h2>Min: {{vWeatherMinDegrees}} °C</h2>
<!-- <div class="item-thumbnail-right">
<img style="float: right;" src={{vWeatherLinkIcon}}>
<div ng-controller="WeatherKabulCtrl">
<h2 style="text-align: right; width:50%; display: inline-block; font-weight: bold;">Berlin {{vWeatherActDegrees}} °C</h2>
</div> -->
</ion-list>
<div class="spacer" style="width: 748px; height: 15px;"></div>`
What about using an ion-grid inside your ion-list ?
<ion-grid>
<ion-row>
<ion-col>
left
</ion-col>
<ion-col>
right
</ion-col>
</ion-row>
</ion-grid>
ionic doc
I hope you can help me with this problem. Since yesterday I’ve been trying to position this green button on the right side. And things like margin don’t work:(
HTML
<ion-header>
<ion-toolbar color="rank">
<ion-searchbar (input)="getItems($event)"></ion-searchbar>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list-header>
Friends
</ion-list-header>
<ion-list>
<ion-item>
<ion-avatar item-start>
<img src="img/fri.jpg">
</ion-avatar>
<h1>JanePrincess</h1>
<h3>Iceland, Reykjavik </h3>
<button ion-button color="rank" round>Add</button>
</ion-item>
</ion-list>
</ion-content>
Here the button
Just like you can see in the docs, you can achieve that by using the item-end attribute in the button:
<ion-list>
<ion-item>
<ion-avatar item-start>
<img src="img/fri.jpg">
</ion-avatar>
<h1>JanePrincess</h1>
<h3>Iceland, Reykjavik </h3>
<button ion-button color="rank" round item-end>Add</button>
</ion-item>
<!-- ... -->
</ion-list>
Use ion-item padding.
<ion-item padding>
<button default ion-button item-right color="rank" round >Add</button>
</ion-item>
You can use css as well.
I hope you made the CSS file for the above problem, so try putting the following code into it:
button {
color:green;
position:relative;
top:-43px;
left: 410px;
}
To adjust the position of the button horizontally, just adjust left position accordingly.