Meinung was ist eine bessere Lösung, um überlappenden Inhalt zu vermeiden (Multi-Upload)

Question

Ich erstelle ein Formular auf einer Wordpress-Website mit dem Ninja Forms-Plugin. Ich musste die Dateiupload-Schaltfläche formatieren. Die beste Lösung (Cross-Browser-kompatibel), die ich fand, war dieses Tutorial:

http://www.abeautifulsite.net/whipping-file-inputs-into-shape-with-bootstrap-3/

Ich schaffte es auf den Button, um zu Stil, wie beabsichtigt, aber ich bin vor zwei Ausgaben jetzt:

a) Die Dateiliste überlappt jetzt den folgenden Inhalt einmal mehr als eine Datei ausgewählt ist.

b) Ich kann 'MultiFile-wrap' Überlauf nicht geben: versteckt ohne versteckt die Dateiliste.

Ich denke an eine der beiden folgenden Lösungen verwenden:

Irgendwie versuchen ‚Multifile-Liste‘, um aus der Mutter (Multifile-wrap) im DOM. (Vielleicht mit jQuery)

oder

Verwenden jQuery, wie viele Elemente zählen zur Zeit in der Liste enthalten sind und eine Marge auf den contant unten entsprechend hinzuzufügen.

Ich bin mir nicht sicher, welcher wäre der bessere Ansatz. Ich neige dazu, den zweiten Ansatz zu verwenden ...

Answer 1

Also ging ich für Option Nummer eins, da es schien, der sauberere Ansatz zu sein, und es mir erlaubte, 'MultiFile-Wrap' Überlauf: versteckt.

Es dauerte ein bisschen für mich zu verstehen, dass 'MultiFile-Liste' dynamisch erstellt wurde, so musste ich die Funktion an ein Klickereignis binden.

Hier ist, was der Trick:

$(document).on('click', '.upload-wrap .MultiFile-wrap', function() { 
    $('.upload-wrap .MultiFile-wrap .MultiFile-list').insertBefore('.nf-desc'); 
});