2016-08-08 12 views
0

Ich habe diese Vorlage aus auf einer Liste von Karten zu entfernen:Wie Raum/shadow zwischen Elementen in einer Liste

<div class="list"> 
<div class="card" ng-repeat="event in eventsSportsDay21"> 

    <div class="item item-avatar item-icon-right" ng-click="toggleEvent(event)"> 
     <!--ng-style="{'background-color': event.eventColor }">--> 
     <img src={{event.eventIcon}}> 
     <i class="icon" ng-class="isEventShown(event) ? 'ion-minus' : 'ion-plus'"></i> 
     <h2><b>{{event.eventTitle}}</b></h2> 
     <p><b>{{event.eventHour}}</b></p> 
    </div> 

    <div class="item item-body" ng-hide="!isEventShown(event)"> 
     <div> 
      <!--<img src="/img/alfarero.jpg" width="30%" style="float: left; margin: 0 20px 20px 0;" ng-show="false">--> 
      <p ng-bind-html="event.eventText | hrefToJS"></p> 
     </div> 
     <div> 
      <!--<p style="clear: both">--> 
      <br/> 
      <div> 
       <i class="icon ion-map balanced" style="font-size: 25px;"></i>&nbsp;&nbsp;<p ng-bind-html="event.eventPlace | hrefToJS" style="display:inline"></p> 

      </div> 
      <!--</p>--> 
      <!--<div>--> 
       <div ng-show="event.eventPhone"> 
        <i class="icon ion-information-circled balanced" style="font-size: 25px;"></i>&nbsp;&nbsp;<p ng-bind-html="event.eventPhone | hrefToJS" style="display:inline"></p> 
       </div> 
      <!--</div>--> 

     </div> 
    </div> 

</div> 
</div> 

Es macht seinen Job, aber ich will es ein wenig zwicken visuell. Zuerst möchte ich die Schatten auf der Unterseite jeder Karte entfernen. Zweitens, wie beseitige ich den Raum zwischen den Karten? Gibt es einen anderen Weg als CSS ?. Diese

ist, was ich bekommen:

enter image description here

Dank!

+1

Dies kann nur mit 'CSS' gemacht werden. Der einzige Grund, warum Sie die aktuellen Ergebnisse erhalten, ist wegen' CSS' –

+0

Danke, Gary. Es ist seltsam, weil dies in allen ionischen Listenbeispielen nicht geschieht. Also habe ich versucht, die Klasse "Karte" zu entfernen und es funktioniert jetzt wie erwartet. Das allererste der Vorlage wäre, was ich unten gepostet habe. – kankamuso

+1

Verwenden Sie css: .card {box-shadow: 0 0px 1px; } –

Antwort

1

Es scheint, dass das Problem Karten verwenden will, wenn sie nicht benötigt werden. Wechseln zu:

<div class="list"> 
<div ng-repeat="event in eventsSportsDay21"> 

gibt das gewünschte Verhalten.

Verwandte Themen