2014-11-25 2 views
10

У меня есть проблема, пытаясь удалить заголовок иона границы дна в моем ионным приложенииудалить границы дна в заголовке иона

you could see my ionic header with border here

Вот код 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> 

Как вы можете см. здесь интересующую нас деталь:

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

Я попробовал ev erything (в браузере я не вижу эту границу!), но ничего не менять! Кто-нибудь может помочь мне найти способ удалить эту границу? N.B. : также попытался отредактировать файл ionic.css и был изменен только в браузере.

EDIT: И это должно быть скрыто только в этой точке зрения, так где класс бар прозрачный

+1

Вы когда-нибудь находили разрешение на это? Имея аналогичную проблему. –

+0

Вы пытались добавить стиль: background-image: none; border-bottom: none? – Christopher

+0

Я использую sidemenu в своем приложении и хочу сделать прозрачный заголовок! можете ли вы объяснить, как вы сделали свой заголовок прозрачным? У меня также есть проблема с границей :(его были недели .. помилуй! –

ответ

30

Нет проблем,

Просто добавьте это в пользовательский CSS:

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

Это сделал трюк, но я не понимаю, почему ... вы даете какое-то объяснение? –

+0

Если сниппет не работает (как и для меня), попробуйте добавить! important, к свойствам background-image и border-bottom. – 0x1ad2

+0

С Ionic 2+ принятый ответ должен быть: https: //stackoverflow.com/a/44064058/3397345 – Davidea

7

@BenNov ответ не работает для меня.

это то, что я сделал, чтобы удалить ион-нав-бар Нижняя граница

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

Я работаю с ионно-1.0.0-rc.4

+0

Да, это то, что я сделал, чтобы удалить нижнюю границу иона-nav-bar –

+0

ОК спасибо. отредактировано;) –

+0

Это сработало для меня. Благодарю. – user1519240

0

Это устранило границы между заголовок и вкладки для меня на ионных 1.1.0

.bar-header { 
    box-shadow: none; 
    height: 45px; 
} 
8

При использовании безлимитного символа без полей все границы будут удалены.

<ion-header no-border> 
+0

спасибо, это простое и рабочее решение –

Смежные вопросы