Can't force padding on ion-card


#1

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


#2

What does your markup look like?

Are you using any page selectors?


#3

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>

#4

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>

#5

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>

#6

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:


#7

No, I don’t want the card in the header, I want it beneath the header.


#9

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.


#10

Take a look at the sample Ionic Conference App: https://github.com/ionic-team/ionic-conference-app