web-dev-qa-db-fra.com

enlever le fond de la bordure dans la tête des ions

J'ai un problème en essayant de supprimer le fond de la bordure de l'en-tête des ions dans mon application ionique

you could see my ionic header with border here

Voici le code de tab-home.html:

                <ion-view hide-nav-bar="true">
            <ion-header-bar align-title="left" class="bar-transparent" >
            <button menu-toggle="left" class="button button-icon ion-ios7-settings">
            </button>
            <div class="title">&nbsp;</div>
            <h1 class="title">proximiti</h1>
            </ion-header-bar>
            <!--<ion-nav-bar class="bar-transparent">
            </ion-nav-bar>-->
            <ion-pane ng-controller="CardsCtrl">
            <!--<ion-nav-buttons side="left">
            <button menu-toggle="left" class="button button-icon ion-navicon"></button>
            </ion-nav-buttons>-->
            <td-cards>
            <td-card ng-repeat="card in cards" on-destroy="cardDestroyed($index)" on-swipe-left="cardSwipedLeft($index)" on-swipe-right="cardSwipedRight($index)" on-partial-swipe="cardPartialSwipe(amt)" class="card-{{card.index}}" ng-controller="CardCtrl">
            <div class="image">
            <!--<div class="yes-text" ng-style="leftTextOpacity">LIKE</div>-->
            <img ng-src="{{card.image}}">
            <!--<div class="no-text" ng-style="rightTextOpacity">NOPE</div>-->
            </div>
            </td-card>
            </td-cards>
            </ion-pane>
            </ion-view>

Comme vous pouvez le voir ici, la partie qui nous intéresse:

                <ion-view hide-nav-bar="true">
            <ion-header-bar align-title="left" class="bar-transparent" >
            <button menu-toggle="left" class="button button-icon ion-ios7-settings">
            </button>
            <div class="title">&nbsp;</div>
            <h1 class="title">proximiti</h1>
            </ion-header-bar>

J'ai tout essayé (dans le navigateur, je ne vois pas cette bordure!), Mais rien ne peut le changer! Quelqu'un pourrait-il m'aider à essayer de trouver le moyen de supprimer cette bordure? N.B. : également essayé de modifier ionic.css et modifié uniquement dans le navigateur.

EDIT: Et il ne devrait être caché que dans cette vue, donc là où la classe est transparente

htmlcssborderionic-framework
13
Ludovico Loreti

Aucun problème,

Ajoutez simplement ceci à votre CSS personnalisé:

.bar-header {
    border: 0px !important;
    border-bottom-color: transparent !important;
    background-image: none !important;
    border-bottom: none !important;
}
33
BenNov

En utilisant ionic-header no-border, toutes les bordures seront supprimées.

<ion-header no-border>
25
H S Progr

La réponse de @BenNov ne fonctionne pas pour moi.

voici ce que j'ai fait pour supprimer la bordure inférieure de ion-nav-bar

.bar {
    background-size: 100% 0px;
}

Je travaille avec ionic-1.0.0-rc.4

8
Tommaso Resti

Cela a supprimé la frontière entre l'en-tête et les onglets pour moi sur ionic 1.1.0

.bar-header {
    box-shadow: none;
    height: 45px;
}
0
Morris Mukiri