jQuery Resizable handle Z-Index

Question

Ich habe festgestellt, dass die größenveränderbaren Anfasser der jQuery UI über allen anderen Elementen auf der Seite liegen. Ich habe die Entwicklungstools von Chrome überprüft und festgestellt, dass ihnen automatisch ein Z-Index von 1001 zugewiesen wird. Gibt es eine Möglichkeit, dies zu deaktivieren und ihnen den gleichen Z-Index zu geben wie dem veränderbaren Element? Danke.

Answer 1

Die z-index ist mit CSS, nicht JavaScript eingestellt. Sie müssen das CSS bearbeiten, in diesem Fall:

.ui-resizable-handle { 
    position: absolute; 
    font-size: 0.1px; 
    z-index: 99999; 
    display: block; 
} 

Oder definieren Sie Ihre eigene Regel, um das Verhalten zu überschreiben. Sehen Sie diese Seite für weitere Informationen: http://www.mail-archive.com/jquery-ui@googlegroups.com/msg09524.html

Answer 2

Funktioniert am besten für mich, denn ohne !important wird die Regel überschrieben.

Answer 3

Für uns war dies die bequemste und am wenigsten hacky Weg, um die Standardeinstellungen für jQuery-Ui-Objekte zu überschreiben. Sie können die "resizable" -Komponente durch eine ihrer Komponenten ersetzen. Stellen Sie nur sicher, dass dies ausgeführt wird, nachdem jQuery geladen wurde, aber vor dem Aufruf von $ (element) .resziable().

$ .extend ($. Ui.resizable.prototype.options, { zIndex: 2147483647 });

Answer 4

Anstatt wichtige Z-Index-Regeln in Ihrem CSS zu platzieren, können Sie diese Option einfach aus dem skalierbaren Prototyp entfernen, und dann erhalten alle Handles den Z-Index, den Sie in Ihrem CSS definieren. Normalerweise müssen Sie nicht einmal einen definieren.

// delete the zIndex property from resizable's options 
// only have to do this once, before instantiating any resizables 

delete $.ui.resizable.prototype.options.zIndex;