Navbar Back button in Modal

Ionic Framework ionic-v3
1

Hi,
I need to add a navbar back-button to a modal, as it happens in a normal page after the .push() action.

This is what i have now, but css (padding and margin) are not like the default one provided with the .push() method.

<ion-header>
    <ion-navbar>
        <ion-buttons left>
            <button ion-button icon-only (click)="viewCtrl.dismiss()">
                <ion-icon name="arrow-back"></ion-icon>
            </button>
        </ion-buttons>
    </ion-navbar>
</ion-header>

First screenshot is what my code create.
Second screenshot is taken from a page with .push() method.

image

I wish both were equal… How to achieve that?

Thx guys!

2 Likes
2

No one has a solution? :disappointed_relieved:

3

ion-buttons {
margin-left: 3rem;
}

Adjust the value to what you want I just put 3 randomly.
keep me update if that doesn’t work

1 Like
4

html: add class to button

<ion-header>
<ion-navbar>
    <ion-buttons left>
        <button ion-button icon-only (click)="viewCtrl.dismiss()" class="my-style-for-modal">
            <ion-icon name="arrow-back"></ion-icon>
        </button>
    </ion-buttons>
</ion-navbar>
</ion-header>

scss:

 ion-buttons button[icon-only].my-style-for-modal {
   margin: 0 6px;
   min-width: 36px;
}

I didn’t found a better solution :frowning:

8 Likes
5

Thanks for both answers @melchia & @reedrichards.
I was looking for a solution without using css (like a property or something similar), but it seems that it is not possible. :rage:

I will try your solutions, but both will work for sure!

1 Like
6

Just do

.back-button {
display: block;
}

In the modal-component css, no?

1 Like
7

This does nothing, @Tamo…
.back-button is the button’s css class, right?

8

Tamo is correct but lacks an “important” :wink:

my suggestion is to add a global class in variable.scss

.modal-back-button{
	.back-button{
		display: block!important
	}
}

then add the class to each page you need

1 Like
9

Hi, just do:

<ion-navbar color="primary">
    <ion-buttons left>
      <button navPop ion-button icon-only>
        <ion-icon color="light" name="arrow-back"></ion-icon>
      </button>
    </ion-buttons>
    <ion-title>Page</ion-title>
  </ion-navbar>
10 Likes
10

@aavelyn yes, @Tamo just lacks the !important. this works for me. Thanks you both.