Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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:

my two toolbars with borders

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.

like image 292
Juanfri Lira Avatar asked Jan 24 '19 13:01

Juanfri Lira


People also ask

How do I get rid of the border in ionic header?

Did you try adding the style: background-image: none; border-bottom: none ?

How do I remove shadow from Ion-toolbar?

Add an option / attribute to the ion-header / ion-toolbar to remove the shadow for a full flat header which can be combined with the page content (not line / shadow). Because the shadow is a background image.

How do I change the color of my ion-toolbar?

Styling the Ionic 5 Toolbar ( ion-toolbar ) $toolbar-background: #123456; $toolbar-border-color: #123456; $toolbar-text-color: #123456; $toolbar-active-color: #123456; $toolbar-inactive-color: #123456; Just put them in the variables. scss file and change their values to your desired colors.

What is ion-toolbar?

The toolbar is a generic bar which is used in an app as a header, sub-header, footer, or sub-footer. It is positioned above or below the content. You can add more than one toolbar in your page, and the <ion-content> will adjust it accordingly.


1 Answers

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.

like image 174
Abdul Hafeez Avatar answered Nov 23 '22 08:11

Abdul Hafeez