I have a problem with the content of . The content is padded automatically and I can’t leave the content on top of the .
This is the .html
<ion-header class="header-profile">
<ion-toolbar class="bar-profile">
<ion-item no-lines class="item-bar-profile">
<ion-avatar >
<img class="centered" src="./assets/img/pio.jpg">
</ion-avatar>
<span class="user-title centered">Don Pio</span>
<span class="user-info centered">Alboraya. Spain</span>
</ion-item>
</ion-toolbar>
</ion-header>
<ion-content class="content-profile">
<div>
<ion-segment [(ngModel)]="profile">
<ion-segment-button value="info">
Perfil
</ion-segment-button>
<ion-segment-button value="config">
Configuración
</ion-segment-button>
</ion-segment>
</div>
<div [ngSwitch]="profile">
<ion-list *ngSwitchCase="'info'">
<ion-item>
<ion-thumbnail item-left>
<img src="./assets/img/pio.jpg">
</ion-thumbnail>
<h2>Ruby</h2>
</ion-item>
</ion-list>
<ion-list *ngSwitchCase="'config'">
<ion-item>
<ion-thumbnail item-left>
<img src="./assets/img/pio.jpg">
</ion-thumbnail>
<h2>Luna</h2>
</ion-item>
</ion-list>
</div>
</ion-content>
And this is the .scss style sheet
page-profile {
ion-avatar img {
width: 80px !important;
height: 80px !important;
}
.user-title {
color: white;
font-size: large;
font-weight: bold;
}
.user-info{
color: white;
font-size: smaller;
}
.centered{
margin-left: auto;
margin-right: auto;
display: block;
text-align: center;
}
.header-profile{
height: 150px;
}
.bar-profile{
height: 150px;
}
.bar-profile .toolbar-background {
background-size: cover;
background-image: url('../assets/img/pio.jpg');
background-position: center center;
background-repeat: no-repeat;
background-color: black;
opacity: .5;
}
.item-bar-profile{
background-color: transparent;
}
.content-profile{
top:150px;
background-color: lightgrey;
}
}
This is a screenshot to see how the segment is padded to center.
What would be wrong?
