So gehen Sie mit falsch platzierten Optionen im Auswahl-Dropdown-Feld von iview um

Dieses Mal zeige ich Ihnen, wie Sie mit der Fehlausrichtung der Auswahl-Dropdown-Box-Optionen umgehen können Hier sind die tatsächlichen Fälle, schauen wir uns sie an.

Bei der Verwendung von iview bin ich auf ein solches Problem gestoßen, als ich die Dropdown-Box-Komponente „Auswählen“ in

Modell verwendete. Wenn das Popup-Feld jedoch einen Bildschirm überschreitet und gescrollt werden muss, werden die ausgewählten Dropdown-Optionen falsch ausgerichtet (Abbildung 1 unten zeigt normal, Abbildung 2 zeigt die Dropdown-Optionen nach dem Scrollen falsch ausgerichtet).

Abbildung 1:

Abbildung 2:

Nach der Analyse des Komponentencodes haben wir den folgenden Stil gefunden:

.ivu-modal .ivu-select-dropdown {
  position: absolute !important;
}

Lösung

Dieser Stil beeinflusst die Positionierung des Die Lösung besteht darin, den ursprünglichen Stil des Autors zu überschreiben.

Allerdings hat der Autor leider ein !important hinzugefügt und die

Priorität geändert.

Wie können Sie also dafür sorgen, dass Ihr Stil eine höhere Priorität hat als sein eigener? Sie können diesen Stil zur benutzerdefinierten Stildatei hinzufügen:

body .ivu-modal .ivu-select-dropdown{
 position: fixed !important;
}

Dies löst die oben genannte Problemfrage. Informationen dazu, warum das Hinzufügen eines Körpers die Priorität des Stils ändern kann, finden Sie in meinen Blogartikeln (how2js.cn).

Ich glaube, Sie haben die Methode gemeistert, nachdem Sie den Fall in diesem Artikel gelesen haben Inhalt, bitte achten Sie auf PHP-Chinesisch. Andere verwandte Artikel online!

Empfohlene Lektüre:

Wie jQuery das Umschalten nach links und rechts implementiert

So binden Sie das Auswahl-Dropdown-Feld von vue.js Ereignissen und Werten

Das obige ist der detaillierte Inhalt vonSo gehen Sie mit falsch platzierten Optionen im Auswahl-Dropdown-Feld von iview um. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!