ionic - Liste ist etwas größer als Container

Question

Ich arbeite an einer ionischen App.

Ich habe gerade bemerkt, dass die Liste, die ich verwende, etwas größer ist als ihr Container.

Zuerst dachte ich, dass es mit der Grenze verwandt war, aber es ist nicht.

Ich weiß, dass es nicht ein Deal Breaker ist, aber es sieht seltsam für mich, und ich würde diese Liste gerne schön aussehen und durch den Behälter ohne Ausgang enthalten ist (auch wenn es nur ein paar Pixel ist)

Sie können ein Beispiel hier sehen: http://codepen.io/NickHG/pen/VaogjL

Wenn Sie genauer hinsehen, Sie, dass alles unter Verbindung sehen Einstellung Liste Teiler draußen ist.

Der Code ich verwende ist eine einfache Liste von ionischen docs:

<div class="hg-login-card-advanced-connection-settings"> 
    <div class="list"> 
     <div class="item item-divider">Connection Settings</div> 
      <div ng-repeat="conn in connections"> 
       <item class="item item-toggle"> 
       {{conn.name}} 
        <label class="toggle toggle-primary"> 
        <input type="checkbox" ng-checked="{{conn.checked}}" ng-model="conn.checked"> 

         <div class="track"> 
         <div class="handle"></div> 
        </div> 
        </label> 
        </item> 
        <item class="item hg-login-card-advanced-connection-settings-details" ng-show="conn.checked==true"> 
        <input type="text" placeholder="testing"> 
        <small class="hg-login-card-advanced-connection-settings-details-status">Status</small> 
        </item> 
       </div> 
      </div> 
     </div> 
    </div> 

Wie kann ich dieses Problem beheben? Danke für jede Rückmeldung und Vorschlag

Answer 1

Ihre .item hat eine negative Marge, die zu Ihrem Problem führt. Ersetzen der CSS mit diesem behebt das Problem:

.item { 
    margin: 0; 
} 

Ich weiß nicht, warum das passieren würde, obwohl. Es ist die ionische Basis CSS. Ich denke, es ist ihre Art zu handeln oder sollte ich sagen, die linke und rechte Grenze eines Gegenstandes zu verstecken.