Wrong position for back Button

Ionic Framework ionic-v3
1

I use Ionic 2 for an App and all pages works well but there is just a page that “Back” button is not on the left side and I am not able to change the position. Could you please help me image

2

Please, post the code of this page.

3 
<ion-header>
  <ion-navbar  color="primary">
    <ion-title> Min Profil</ion-title>
  </ion-navbar>
</ion-header>
<ion-content class="myview">


  <div class="divider" padding>
    <hr class="left"/>Min resa<hr class="right" />
  </div>

  <ion-card color="white" class="card">
    <ion-card-content>
      <div class="progress-pie-chart" data-percent="1">
        <div class="ppc-progress">
          <div class="ppc-progress-fill"></div>
        </div>
        <div class="ppc-percents">
          <div class="pcc-percents-wrapper">
            <span>20%</span>
          </div>
        </div>
      </div>
      <p>Bra jobbat! Fortsätt din resa i Join-appen</p>
    </ion-card-content>
  </ion-card>
  <ion-card color="white">
    <ion-card-content>
      12/49 avsnitt avklarade
    </ion-card-content>
  </ion-card>

    <ion-row class="mycard">
        <ion-col class="newcard1">
          <ion-card padding-top padding-bottom>Personquiz <br>
            <hr>
            <h1>1/49</h1>
            <button ion-button round outline color='primary'>Visa</button>
          </ion-card>
        </ion-col>
        <ion-col class="newcard2" >
          <ion-card  padding-top padding-bottom>Kunskapquiz<br>
            <hr>
            <h1>0/20</h1>
            <button ion-button round outline color='primary' >Visa</button></ion-card>
        </ion-col>
      </ion-row>
  <ion-card color="white">
    <ion-card-content>
      CV
      <br>
      Du har inte påbörjat ditt<p>join CV ännu. Börja här!</p>
      <button ion-button round outline color='primary'>Skapa ditt CV nu</button>
    </ion-card-content>
  </ion-card>
</ion-content>

css:

page-profile {

  h3 {
    text-align: center;
  }

  .myview {
    background-color: #f6f6f6;
  }

  .card
  {
    margin-bottom:5px !important;
    margin-top:0px !important;
  }

  .mycard
  {
    margin-bottom:-5px !important;
    margin-top:-5px !important;
    margin-left:-5px;
    margin-right:-5px;
  }

  .newcard1
  {
    margin-right:30px;
  }
  .newcard2
  {
    margin-left:-60px;
  }

  .divider {
    width:328px;
    text-align:center;
  }

  .divider hr {
    margin-left:auto;
    margin-right:auto;
    width:29%;

  }

  .left {
    float:left;
  }

  .right {
    float:right;
  }

  hr {
    width: 40%;
  }
  ion-card-content {
    text-align: center;
  }

  ion-col ion-card {
    text-align: center;

  }

   button {
    min-width: 60%;
    border-color:#ff6600 !important;
  }

  p {
    color: map-get($colors, bleak);
    font-size:smaller;
    padding-top:10px;

  }

  @mixin circle($size) {
    content: "";
    position: absolute;
    border-radius: 50%;
    left: calc(50% - #{$size/2});
    top: calc(50% - #{$size/2});
    width: $size;
    height: $size;
  }

  $size: 100px;
  .progress-pie-chart {
    width: $size;
    height: $size;
    border-radius: 50%;
    background-color: #E5E5E5;
    position: relative;
    &.gt-50 {
      background-color: #81CE97;
    }
  }
  .ppc-progress {
    @include circle($size);
    clip: rect(0, $size, $size, #{$size/2});
    .ppc-progress-fill {
      @include circle($size);
      clip: rect(0, #{$size/2}, $size, 0);
      background: #81CE97;
      transform: rotate(60deg);
    }
    .gt-50 & {
      clip: rect(0, #{$size/2}, $size, 0);
      .ppc-progress-fill {
        clip: rect(0, $size, $size, #{$size/2});
        background: #E5E5E5;
      }
    }
  }
  .ppc-percents {
    @include circle(#{$size/1.15});
    background: #fff;
    text-align: center;
    display: table;
    span {
      display: block;
      font-size: 2.6em;
      font-weight: bold;
      color: #81CE97;
    }
  }
  .pcc-percents-wrapper {
    display: table-cell;
    vertical-align: middle;
  }

  body {
    font-family: Arial;
    background: #f7f7f7;
  }
  .progress-pie-chart {
    margin: 10px auto 0;
  }
}
4

Solved ! it was a problem with css. just removed :slight_smile:

   button {
    min-width: 60%;
    border-color:#ff6600 !important;
  }
1 Like
5