None of the .css attributes are working to for the ion-card padding:
Here is what I’m using in the .css
.ion-cards{
ion-card {
margin-top:20px !important;
padding-top: 50px !important;
border-top: 20;
}
}
HTML
And notice in the 2d screen shot how the other tab page’s title is showing in the background of the header. Not to mention I can’t get the padding for this page either and it’s not a card,…just ion-content
What does your markup look like?
Are you using any page selectors?
this is the html with the card that won’t adhere to the padding
<ion-header>
<ion-navbar color="navbar">
<ion-title></ion-title>
<ion-buttons right>
<button ion-button icon-only (click)="closeModal()">
<ion-icon name="close-circle"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
<ion-card padding class="ion-cards">
<ion-card-content padding>
</ion-card-content>
</ion-card>
This is the page with the transparent header. This is a tab page
<ion-header>
<ion-navbar color="navbar" class="navbar">
<ion-buttons left>
<button ion-button text-only (click)="skipAddingInfo()">
Skip
</button>
</ion-buttons>
<ion-title text-center>Profile</ion-title>
<ion-buttons right>
<button ion-button text-only (click)="savePersonalInfo()">
Save
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
<ion-content padding class="profilePhoto center-text" *ngIf="loggedInUser">
<div>
<!-- <div class="cameraIcon">
<img src="assets/img/ic-camera.png"/>
</div>-->
<img [src]="loggedInUser.photoURL"/>
<h1>
Background Info
</h1>
<h2>
Name
</h2>
<p>
{{ loggedInUser.displayName }}
</p>
<h2>
City
</h2>
<p>
</p>
<h2>
</h2>
<p>
<textarea #myInput rows="1" maxLength="50" (keyup)="resize()" [(ngModel)]="bio" placeholder="Enter your bio"></textarea>
</p>
<h2>
Add photos
</h2>
<ion-row class="add-background">
<ion-col>
<div [ngSwitch]="this.cameraServiceProvider.photo1">
<div *ngSwitchDefault>
<img [src]="this.cameraServiceProvider.photo1" (click)="Present('photo1.png')"/>
</div>
<div *ngSwitchCase="'UseButton'">
<img src="assets/img/add-an-image.png" (click)="selectPhoto('photo1.png')"/>
</div>
</div>
</ion-col>
<ion-col >
<div [ngSwitch]="this.cameraServiceProvider.photo2">
<div *ngSwitchDefault>
<img [src]="this.cameraServiceProvider.photo2" (click)="Present('photo2.png')"/>
</div>
<div *ngSwitchCase="'UseButton'">
<img src="assets/img/add-an-image.png" (click)="selectPhoto('photo2.png')"/>
</div>
</div>
</ion-col>
</ion-row>
<ion-row class="add-background">
<ion-col>
<div [ngSwitch]="this.cameraServiceProvider.photo3">
<div *ngSwitchDefault>
<img [src]="this.cameraServiceProvider.photo3" (click)="Present('photo3.png')"/>
</div>
<div *ngSwitchCase="'UseButton'">
<img src="assets/img/add-an-image.png" (click)="selectPhoto('photo3.png')"/>
</div>
</div>
</ion-col>
<ion-col >
<div [ngSwitch]="this.cameraServiceProvider.photo4">
<div *ngSwitchDefault>
<img [src]="this.cameraServiceProvider.photo4" (click)="Present('photo4.png')"/>
</div>
<div *ngSwitchCase="'UseButton'">
<img src="assets/img/add-an-image.png" (click)="selectPhoto('photo4.png')"/>
</div>
</div>
</ion-col>
</ion-row>
<div>
</div>
<h2>
Interested
</h2>
<p>
<input placeholder="Enter">
</p>
<div padding class="">
<ion-chip *ngFor="let of">
<ion-label>{{ }}</ion-label>
<button (click)="()">
<img src="assets/img/ic-small-close.png"/>
</button>
</ion-chip>
</div>
<p>Notifications</p>
<ion-item>
<ion-label></ion-label>
<ion-toggle [(ngModel)]="" ></ion-toggle>
</ion-item>
<ion-item>
<ion-label></ion-label>
<ion-toggle [(ngModel)]="" ></ion-toggle>
</ion-item>
<div>
<ion-item>
<ion-label></ion-label>
<ion-toggle [(ngModel)]="" ></ion-toggle>
</ion-item>
</div>
</div>
<button ion-button block color="navbar" (click)="savePersonalInfo()">Save</button>
<button ion-button block color="navbar" (click)="logoutOfFacebook()">Logout</button>
<ion-content class="settings">
</ion-content>
</ion-content>
Do you want your card in the header?
<ion-header>
<ion-navbar>
<ion-title>
Craft Beer
</ion-title>
</ion-navbar>
</ion-header>
<ion-content>
<ion-card>
<ion-card-content>
<ion-card-title text-center>
...
</ion-card-title>
</ion-card-content>
</ion-card>
</ion-content>
Transparent header:
<ion-header no-border>
<ion-navbar transparent>
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
</ion-navbar>
</ion-header>
See:
No, I don’t want the card in the header, I want it beneath the header.
I think I explained my issue wrong. I actually don’t want a transparent header. The problem with my header is that it’s transparent. The issue is that the other header’s title can be seen underneath. I don’t want that and I’m not sure why the header from another page can be seen.
