Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

ionic 2 - Remove Border Footer

Tags:

ionic2

I have a blue footer like this

<ion-footer align="center">
  <ion-toolbar>
    <ion-title>
...

But it is showing a shadow style border at the top. How can I remove it. I tried to inspect it but did not find anything.

like image 211
Missak Boyajian Avatar asked May 23 '17 04:05

Missak Boyajian


People also ask

How to remove the border in ionic class?

In ionic 2/3 border will be removed by using ionic-header no-border. In ionic 5 border will be removed by using class="ion-no-border". .bar-header { border: 0px !important; border-bottom-color: transparent !important; background-image: none !important; border-bottom: none !important; }

How to make the header and footer transparent?

To have a transparent header or footer you have to override the class "scroll content" in the ion-content and set the margin-top or margin-bottom to 0. Thanks for contributing an answer to Stack Overflow!

What is footer in HTML?

Footer is a root component of a page that sits at the bottom of the page. Footer can be a wrapper for ion-toolbar to make sure the content area is sized correctly.

What is footer in React React?

Footer is a root component of a page that sits at the bottom of the page. Footer can be a wrapper for ion-toolbar to make sure the content area is sized correctly. import React from 'react'; import { IonContent, IonFooter, IonToolbar, IonTitle } from '@ionic/react'; export const FooterExample: React.


1 Answers

In ionic 5 the built in class is slightly different I came across this recently and decided to post an update.

<ion-footer class="ion-no-border">
  <ion-toolbar>
    <ion-title>
      fsdfda
    </ion-title>
  </ion-toolbar>
</ion-footer>
like image 162
Shawin Mendis Avatar answered Sep 24 '22 00:09

Shawin Mendis