2017-04-26 14 views
1

私は各イオンアイテムの間の線を削除するイオンリストタグのno-lines指定を使用していますが、削除したい場所に下の境界線を残しています。Ionic2イオンリスト、どのように下の罫線を削除しますか?

removeBorder.html

<ion-content> 
    <ion-list no-lines> 
    <ion-item-sliding *ngFor="let message of Messages"> 
     <ion-item> 
     <ion-thumbnail item-left> 
      <img src="{{message.logo._url}}"> 
     </ion-thumbnail> 
     <ion-item class="blurb" text-wrap detail-push>{{message.message}}</ion-item> 
     </ion-item> 
     <ion-item-options side="left"> 
     <button ion-button color="custom" (click)="more()">More</button> 
     </ion-item-options> 
     <ion-item-options side="right"> 
     <button ion-button color="light" (click)="other()">Other</button> 
     </ion-item-options> 
    </ion-item-sliding> 
    </ion-list> 
</ion-content> 

removeBorder.scssここ

.blurb { 
font-size: 11px; 
font-family: 'Arial', sans-serif; 
color: #585b60; 
text-transform: none; 
text-overflow: visible; 
} 

あなたは私が取り除かたいメッセージの底からのアイテムの境界線であるトップラインを見ることができ私も削除したいと思いますリストの境界線と一番下の行は、正確に必要な場所であるタブバーの一番上です。リストには、これら2つのボトムボーダーのために保存する他の行はありません。

enter image description here

答えて

0

私はちょうど私のアプリに新しいページにこれを試してみました:

<ion-list no-lines> 
    <ion-item-sliding> 
    <ion-item> 
     <ion-thumbnail item-left> 
     <img src=""> 
     </ion-thumbnail> 
     <ion-item text-wrap></ion-item> 
    </ion-item> 
    <ion-item-options side="left"> 
     <button ion-button color="custom">More</button> 
    </ion-item-options> 
    <ion-item-options side="right"> 
     <button ion-button color="light">Other</button> 
    </ion-item-options> 
    </ion-item-sliding> 
</ion-list> 

とNOの線はありません。 enter image description here

あなたのテンプレートは正しいとは言えません。ラインは機能していないかもしれません。私が削除したattrのいくつか、またはクラスですか?

・ホープこのヘルプはあなた

+0

おかげで、フェルナンド・これまでのところ、運。 。 。 – rashadb

+0

あなたの情報で私はできませんより多くを行うには、あなたは、クロムの開発ツールを試して、どの1つがボーダーを持っているかを確認するために項目を検査し、 –

0

私は前に同じ問題を持っている、と私は一番下の行を非表示にするには、解決策を見つけました。この問題は、ion-item-slidingによって検出される可能性があります。

あなたはこれを試すことができます。

<ion-list no-lines style="border: none;"> 
    //... 
</ion-list> 
関連する問題