How do I remove a border on an Ion-Toolbar?

Question

I need help removing the border from the ion-toolbar in the ion-header in Ionic v4 (4.0.9).

My objective is to remove this:

In my code I have a ion-header with two ion-toolbar. I've tried everything the no-border attribute inside ion-header and ion-toolbar.

I've also tried adding the attributes to the .scss of my page like the following:

<ion-header no-border-bottom no-border-top no-border>
  <ion-toolbar color="dark" no-border-bottom no-border-top no-border>
    <img src="../../assets/icoUserLogin.png" alt="Logo Aikox" slot="start" witdh="20%" />
    <ion-title slot="primary">
      Test
    </ion-title>
  </ion-toolbar>
  <ion-toolbar class="ToolbarVerde" color="medium" no-border-bottom no-border-top no-border>
    <ion-buttons slot="start">
      <img src="../../assets/icoListado.png" alt="Icono Listado" slot="start" width="70%" />
    </ion-buttons>
    <ion-title>
      <span>test</span>
      <br />
      <span>test</span>
    </ion-title>
    <ion-buttons slot="primary">
      <ion-button (click)="Nuevo()">
        <img src="../../assets/icoRefresh.png" alt="Icono Recargar" width="70%" /><br />
      </ion-button>
      <ion-button (click)="Nuevo()">
        <img src="../../assets/icoNew.png" alt="Añadir Parte de Trabajo" width="70%" /><br />
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

.toolbar-background{
    --border-width: 0px !important;
    border: 0 !important;
}
.toolbar-container{
    --padding-top: 0px !important;
    --padding-left: 0px !important;
    --padding-right: 0px !important;
    --padding-bottom: 0px !important;
    padding-top: 0px !important;
    padding-left: 0px !important;
    padding-right: 0px !important;
    padding-bottom: 0px !important;
}
.ToolbarVerde{
    --padding-top: 0px !important;
    --padding-left: 0px !important;
    --padding-right: 0px !important;
    --padding-bottom: 0px !important;
    padding-top: 0px !important;
    padding-left: 0px !important;
    padding-right: 0px !important;
    padding-bottom: 0px !important;
}

But this is not working.

score 61 · Answer 1 · edited Nov 13 '20 at 15:23

61

In case any one is looking for Ionic 5 solution, do this:

<ion-header class="ion-no-border">
</ion-header>

It removes border and shadow.

edited Nov 13 '20 at 15:23

Dharman

30,962
25
85
135

answered Mar 19 '20 at 06:38

Abdul Hafeez

636
5
7

score 33 · Accepted Answer · answered Apr 23 '19 at 11:54

33

Hi this might help someone

<ion-header no-border >

</ion-header>

this remove the line in ionic4

answered Apr 23 '19 at 11:54

Yokesh Varadhan

1,636
4
21
47

1

no-border directive works for common pages, but not for modals. – rochasdv Oct 29 '19 at 04:55
@rochasdv It is working fine with the Modal pages too. – Sampath Nov 23 '19 at 12:17
7

ionic 5 replace no-border with class="ion-no-border" – Peter Edwards Dec 03 '20 at 00:47

score 10 · Answer 3 · answered Dec 18 '19 at 18:23

10

Use this to remove the shadow:

ion-header {
  &.header-md:after {
    background: none;
  }
}

answered Dec 18 '19 at 18:23

Marcelo Ribeiro

331
3
6

score 6 · Answer 4 · answered Nov 28 '19 at 21:00

6

Use this to remove the border:

ion-toolbar {
  --border-style: none;
}

answered Nov 28 '19 at 21:00

Герман Манвелов

71
1
2

score 2 · Answer 5 · edited Nov 13 '20 at 15:20

2

Finally got it, for anyone having problems with this:

Add a class to your <ion-toolbar class="ToolbarVerde", then in your .scss use the following:

.ToolbarVerde{
    --padding-top: 0px !important;
    --padding-start: 0px !important;
    --padding-right: 0px !important;
    --padding-end: 0px !important;
}

edited Nov 13 '20 at 15:20

Braiam

1
11
47
78

answered Jan 24 '19 at 13:48

Juanfri Lira

423
3
7
17

score 1 · Answer 6 · answered Jun 06 '21 at 18:13

1

<ion-content [fullscreen]="true">

answered Jun 06 '21 at 18:13

Asiddeen bn Muhammad

541
5
7

How do I remove a border on an Ion-Toolbar?

6 Answers6