2016-08-09 106 views
2

Ich habe html wie dieseWarum der modale Dialog "Winkelmaterial" wird erweitert, wenn sich Text innerhalb der Spanne befindet?

<md-dialog aria-label="Reject" ng-cloak=""> 
    <form name="rejectionForm"> 
    <md-dialog-content> 
     <div class="md-dialog-content"> 
     <h2 class="md-title">Reject confirmation for</h2> 
     <span ng-bind-html="vm.parent.task.label"></span> 
     <textarea placeholder="Please provide a reason for rejection" style="width: 530px; height: 75px"></textarea> 
     </div> 
    </md-dialog-content> 
    <md-dialog-actions layout="row"> 
     <span flex="flex"></span> 
     <md-button ng-click="vm.parent.cancel()">CANCEL</md-button> 
     <md-button ng-click="vm.parent.reject()" class="md-primary md-raised">REJECT</md-button> 
    </md-dialog-actions> 
    </form> 
</md-dialog> 

und modaler Dialog auf 1032px erweitert. Es funktioniert, wenn ich span in div umwandle (oder wenn ich display auf block setze), kann ich div verwenden, aber ich möchte wissen, warum der modale Dialog erweitert wird, wenn es einen Bereich mit Text gibt.

+0

Ohne zu wissen, was vm.parent.task.label ist, wäre es schwierig, zu verstehen, warum. Mein Bauchgefühl ist, dass es ein nicht geschlossenes Etikett in dem Etikett gibt – Dacheng

Antwort

1

Nach einigen Untersuchungen, so scheint es, die Kombination aus der textareanach der Spanne zu sein, die das Problem verursacht, nicht die span selbst, die durch das Entfernen die textarea beobachtet werden kann - die span verhält sich wie ein div.

Hinzufügen display:block zum textarea löst das Problem - CodePen

<span>wqweqweqweqweqweqweqw eqweqwe qweqweqweqweqweq weqweqweqwe qweqwe </span> 
<div> 
    <textarea placeholder="Please provide a reason for rejection" style="width: 530px; height: 75px; display:block"></textarea> 
</div>