Maison > interface Web > Tutoriel H5 > Comment gérer les options égarées dans la liste déroulante de sélection d'iview

Comment gérer les options égarées dans la liste déroulante de sélection d'iview

php中世界最好的语言
Libérer: 2018-03-27 17:34:09
original
2989 Les gens l'ont consulté

Cette fois, je vais vous montrer comment gérer le désalignement des options de la liste déroulante de sélection d'iview. Quelles sont les choses auxquelles il faut prêter attention lors de la résolution du désalignement des options de la liste déroulante de sélection d'iview Ce qui suit ? est un cas pratique, jetons un coup d'oeil.

Lors du processus d'utilisation d'iview, j'ai rencontré un tel problème, en utilisant le composant de la liste déroulante de sélection dans

Modèle. Cependant, lorsque la boîte de dialogue dépasse un écran et doit défiler, les options déroulantes sélectionnées seront mal alignées (la figure 1 ci-dessous montre la normale, la figure 2 montre les options déroulantes mal alignées après le défilement.)

Figure 1 :

Figure 2 :

Après analyse du code du composant, le style suivant a été trouvé :

.ivu-modal .ivu-select-dropdown {
  position: absolute !important;
}
Copier après la connexion

Solution

C'est ce style qui affecte le positionnement du La solution est d'écraser le style original de l'auteur.

Cependant, malheureusement, l'auteur a ajouté un !important et a modifié la

priorité.

Alors, comment faire en sorte que votre style ait une priorité plus élevée que le sien ? Vous pouvez ajouter ce style au fichier de style personnalisé :

body .ivu-modal .ivu-select-dropdown{
 position: fixed !important;
}
Copier après la connexion
Cela résout la question problématique mentionnée ci-dessus. Concernant la raison pour laquelle l'ajout d'un corps peut changer la priorité du style, vous pouvez vous référer aux articles liés à mon blog (how2js.cn)

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article pour plus de passionnant. contenu, veuillez faire attention au php chinois Autres articles connexes en ligne !

Lecture recommandée :

Comment jQuery implémente la bascule coulissante gauche et droite

Comment lier la liste déroulante de sélection de vue.js Événements et valeurs

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal