Heim > Web-Frontend > H5-Tutorial > Hauptteil

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

php中世界最好的语言
Freigeben: 2018-03-27 17:34:09
Original
2926 Leute haben es durchsucht

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;
}
Nach dem Login kopieren

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;
}
Nach dem Login kopieren
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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!