html - guia - quitar el borde inferior en el encabezado de iones
qgis manual (4)
Tengo un problema al intentar eliminar el borde del borde del encabezado de iones en mi aplicación iónica
Aquí está el código 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"> </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>
Como puede ver aquí, la parte que nos interesa:
<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"> </div>
<h1 class="title">proximiti</h1>
</ion-header-bar>
Intenté todo (¡en el navegador no veo este borde!), ¡Pero nada para cambiarlo! ¿Alguien podría ayudarme a tratar de encontrar la manera de eliminar ese borde? NB: también intenté editar ionic.css y solo cambié en el navegador.
EDITAR: Y debe estar oculto solo en esta vista, entonces, donde la clase es transparente
La respuesta de @BenNov no funciona para mí.
esto es lo que hice para eliminar el borde inferior de la barra de ion-nav
.bar {
background-size: 100% 0px;
}
Estoy trabajando con ionic-1.0.0-rc.4
No hay problema,
Solo agregue esto a su CSS personalizado:
.bar-header {
border: 0px !important;
border-bottom-color: transparent !important;
background-image: none !important;
border-bottom: none !important;
}
Esto eliminó el límite entre el encabezado y las pestañas para mí en iónico 1.1.0
.bar-header {
box-shadow: none;
height: 45px;
}
Mediante el uso de encabezado sin encabezado iónico, se eliminarán todos los bordes.
<ion-header no-border>