Wie man ein verstecktes (ng-getarntes) Objekt herstellt, behält den Platz bei, den es aufnimmt, wenn es sichtbar ist
In einer Tabelle ... Ich habe Aktionsschaltflächen, die angezeigt werden, wenn die Maus mit ng-cover und ng-show über diese Zeile geht.
Das Problem ist , wenn das Symbol erscheint, nimmt es mehr Platz in Anspruch, als wenn es nicht da ist, und der HTML-Code springt um.
Ich habe sogar meine CSS auf display gesetzt: none für ng-click, was meiner Meinung nach den Raum behalten soll, den das versteckte Element einnimmt (im Gegensatz zu visibility: hidden).
Wie kann ich das beheben? ODER können Sie sich einen besseren Weg vorstellen?
%Vor%Hier ist ein Plunkr-Beispiel: Ссылка
4 Antworten
ngCloak wird für
verwendetverhindern, dass die Angular html template kurz von der angezeigt wird Browser in seiner rohen (nicht kompilierten) Form während Ihre Anwendung ist Laden
Der richtige Ort, um es zu platzieren, wäre weit oben im DOM-Baum, aber es ist wirklich gedacht, um ein anderes Problem als das zu lösen. Ich würde versuchen, hier mit ngShow zu gehen und stattdessen die CSS-Klasse zu überschreiben, .ng-hide statt visibility: hidden;
display: none; zu machen
(Sichtbarkeit ist diejenige, die den Raum bewahrt und nicht anzeigt).
Wie in den Dokumenten für ngShow erwähnt, müssen Sie !important verwenden, um die% zu überschreiben. co_de% Eigenschaft.
Beachten Sie, dass in der Version von Angular, die Sie in Ihrem Plumbing verwendet haben, display: none; dem verborgenen Element einen Inline-Stil hinzufügt. Ich bin mir nicht sicher, welche Version sich davon entfernte, aber ich konnte diesen Ansatz nicht mit 1.0.5 umsetzen.
Hier ist es mit Ihrem Plunder, aber mit der neuesten Angular-Version: Plunk
Spät zur Party, jedoch ...
In meinem Fall benutze ich, wenn ich dies tun muss, ng-class. Wenn Sie den Code aus Ihrer ng-show kopieren und in HTML:
%Vor%CSS:
%Vor%Cursor: Die Standardeinstellung bewirkt, dass der Cursor für die Zwecke der Benutzerfreundlichkeit nicht geändert wird. Hoffe das hilft!
BEARBEITEN: In diesem Fall macht das Hinzufügen des Cursors und showEdit zum ng-klick wahrscheinlich keinen Unterschied, da das Symbol immer angezeigt wird, wenn sich die Maus wegen des Hover-Ereignisses über dem Symbol befindet, aber ich denke, es ist eine gute Übung um alle Grundlagen abzudecken
Sie können das mit CSS tun. Du kannst deinem <tr> eine Höhe geben.
Sie können Ihren Containern Höhe zuweisen, was manchmal nicht praktikabel ist, weil Sie die Inhaltshöhe nicht immer im Voraus kennen. oder Sie könnten den Inhalt Ihrer Klasse ändern, indem Sie sie als
deklarieren %Vor%Beachten Sie die Klasse .not_remove. Dies erzwingt dieses neue Verhalten nur für Elemente, die die no_remove-Klasse haben. Die Anzeigeeigenschaft kann auf den Fluss eingestellt werden, dem Ihr Element folgt
Tags und Links javascript angularjs css