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.
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.