J'utilise le framework Bootstrap 4 dans mon projet et j'utilise le popover pour mes besoins. Pendant que j'utilise le popover, j'ai remarqué que le popover lui-même ajuste automatiquement la position lorsque la fenêtre passe du portrait au paysage.
Le popover a une hauteur fixe et j'ai donné le placement des données en bas. Lors du passage du portrait au paysage, il ajuste automatiquement la position et passe en position supérieure.
Mon exigence est que j'ai besoin du placement de popover en bas dans tous les écrans et fenêtres et que je souhaite empêcher son comportement d'auto-ajustement de la position de bas en haut.
Pendant que j'étudie le problème, j'ai constaté que la hauteur dépassait la hauteur du port de vue et causait donc le problème.
Toute aide ou solution serait grandement appréciée. Merci d'avance. :)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
<body>
<header>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</nav>
</header>
<div class="subheader">
<nav class="nav nav-pills nav-fill">
<a class="nav-item nav-link active" href="#" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus.">Active</a>
<a class="nav-item nav-link" href="#" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus.">Popver 1</a>
<a class="nav-item nav-link" href="#" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus.">Popver 2</a>
<a class="nav-item nav-link disabled" href="#" tabindex="-1" aria-disabled="true" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus.">Popver 3</a>
</nav>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>Étape pour reproduire:
1) Ouvrez le lien https://jsbin.com/paladipepi/1/edit?html,css,js,output , sortie sortie dans le navigateur Chrome
2) Ouvrez l'émulateur et sélectionnez n'importe quel appareil mobile (iPhone6 / iPhoneX) et cliquez sur le popover.
3) Passer en mode paysage
Résultat attendu: doit être placé en bas
Résultat réel: ajustement automatique à la position supérieure.
Code
.subheader{
position:sticky;
}
.popover-body{
height:340px;
}$(function () {
$('[data-toggle="popover"]').popover({
trigger: 'focus'
})
})Link : `https://jsbin.com/paladipepi/1/edit?html,css,js,output`
4 Réponses :
Popover est basé sur popper.js. La position est définie en `` bas '' mais chaque fois que vous la voyez en mode paysage de l'iphone, le popover n'a pas la place de l'afficher en position basse en raison de sa hauteur de 340px, ce qui l'oblige à effectuer le rendu du haut (ce comportement est correct cependant) . Maintenant, selon vos besoins, vous pouvez essayer de supprimer la hauteur de .popover-body sur le paysage de l'iphone ou de la réduire, en utilisant media queries et en définissant la height à 100% du html et du corps.
J'espère que cela aide!!!
Salut @Kunal Oui, j'ai essayé ces possibilités en réduisant la hauteur et en ajoutant le overflow-y: faites défiler jusqu'au popover-body tout en passant au paysage en utilisant jquery et ça marche !!!! Mais c'est l'exigence du client et je ne peux pas changer cela. Existe-t-il un autre moyen possible d'empêcher ce comportement.?
Je ne pense pas qu'il existe une autre solution de contournement pour faire cela. Parce qu'au téléphone, il faut régler les choses. Nous ne pouvons pas garder la hauteur à 340px dans une fenêtre de 414px.
Mais nous pouvons faire défiler le contenu du corps à droite ..? Le popover doit défiler avec le contenu du corps avec une position fixe. Est-ce une solution de contournement possible. J'ai essayé mais je n'ai pas réussi.?
Ouais, c'est peut-être la seule solution dans ce scénario. Mais je ne pense pas que ce soit possible avec le bootstrap. Vous pouvez essayer une bibliothèque jquery externe pour cela, par exemple: 'tooltipster'. Cela pourrait aider !!!
Je peux le faire avec popper.js lui-même. J'ai créé un nouveau popover en utilisant popper.js et je suggère déjà ces options, mais le client doit empêcher le comportement auto-ajustable de bootstrap 4. C'est possible..?
Hourra !!!!!!!!!!!!!!!!!!!!!!!!!!!!
J'ai la solution
définissez le placement de secours sur ['left', 'right', 'top', 'bottom'] dans les options Bootstrap Popover
Link: https://popper.js.org/popper-documentation.html#modifiers..flip.behavior
<script>
$(function() {
$('[data-toggle="popover"]').popover({
container: '.subheader',
fallbackPlacement : ['left', 'right', 'top', 'bottom']
})
})
</script>
Merci Rachel :)
Sous forme d'attribut: data-fallback-placement = '["left", "right", "top", "bottom"]'
Il suffit de définir le conteneur et la limite sur le corps, ainsi que tous les emplacements de secours en bas
$(function () {
$('[data-toggle="popover"]').popover({
trigger: 'focus',
container: 'body',
boundary: 'body',
fallbackPlacement: ['bottom','bottom','bottom','bottom']
})
})
définir fallbackPlacement sur 'anti-horaire' et positionner le conteneur sur 'relatif'
$('[data-toggle="popover"]').popover({
container: '.container',
html: true,
trigger:'manual',
fallbackPlacement: 'counterclockwise'
})
Salut @RachelGallen Merci pour votre réponse. Mis à jour avec le code. Jetez un coup d'oeil s'il vous plait
Comment ça va? La question a l'air beaucoup mieux maintenant :)
Le même problème existe. Il ajuste automatiquement la position inférieure à la position supérieure tout en passant du mode portrait au mode paysage sur les appareils (iPhoneX). Testé dans l'émulateur Chrome
Je ne peux pas le reproduire. J'utilise un Android 8 (HTC) .. le popover reste dans la même position par rapport à la barre de navigation? N'est-ce pas ce que vous espérez? Est-ce uniquement un problème Ios?
Non en fait je veux la même position en bas. Je veux empêcher son comportement d'auto-ajustement de la position basse à la position haute. (il est nécessaire de placer les données de popover en bas dans tous les cas. Maintenant, il est auto-ajusté en position supérieure lorsque la hauteur du corps de popover dépasse la hauteur de la fenêtre. Cela peut être le problème. Je veux éviter ce comportement)
Pouvez-vous s'il vous plaît passer en mode paysage. :)
J'ai fait. Et je viens de le tester sur un vieil iphone 5. Le popover n'est pas dimensionné de manière réactive, c'est le plus gros problème tel que je le vois. Sur l'androïde en mode paysage, je ne pouvais pas voir le bas, sur l'iphone en paysage, je ne pouvais pas voir le haut ou le bas, seulement le milieu!
Je suggère d'utiliser autre chose que px pour le dimensionner, peut-être un% de hauteur avec la position relative ou / et définir la marge de sorte que ce soit le même haut et le bas - l'alignement vertical du milieu pourrait fonctionner (bien que cela le fasse rarement selon mon expérience !!). Rusé. Résolvez définitivement le problème des pixels
Ma faute. J'espère que vous n'avez pas compris ma question. La position supérieure signifie littéralement le comportement du placement de popover bootstrap. Juste pour que ce soit plus clair si elle est en bas, la flèche sera la position supérieure du popover et si elle est en haut, la flèche sera la position du bas Actuellement, elle est au milieu, elle change le comportement du popover de bas en haut lorsque la hauteur du popover dépasse la hauteur de la fenêtre. Veuillez observer la position de la flèche et ensuite supprimer la hauteur fixe de la classe popover-body et vérifier à nouveau le comportement. J'espère que vous l'avez. :)
je ne peux pas changer la hauteur. Ce popover contient l'option de tri de filtre et a une hauteur minimale de 340px. Il augmentera selon que l'utilisateur sélectionne l'option de filtre. Par défaut, il contient 5 options qui auront la hauteur minimale de 340px.
Je ne pouvais pas dire où se trouvait la flèche sur le paysage sur l'iphone 5, sur le portrait, la flèche était en bas. Sur Android, la flèche était en bas dans les deux sens
ce n'est pas très convivial de ne pas avoir de taille ajustable, de filtre ou pas de filtre. Ajoutez un parchemin si vous le devez, mais pour le moment, vous devez augmenter votre expérience utilisateur
Merci pour la suggestion, mais c'est l'exigence du client et je ne peux pas changer cela. Je ne parviens pas à télécharger l'image depuis le réseau de mon entreprise. Je vais bientôt mettre à jour cela avec des images. J'espère que cela aidera à comprendre le problème. J'apprécierais vraiment votre temps et vos efforts pour cela et j'attends de l'aide après avoir téléchargé les images. :)
Je comprends le problème après votre description de top, etc. Mais le problème est que je ne pouvais même pas voir la flèche sur iOS, et c'est un problème plus grave que la flèche qui se trouve au mauvais endroit. J'ai des choses à faire maintenant mais bonne chance pour résoudre le problème
Merci @RachelGallen pour votre soutien. :) Passez une bonne journée. :)
Salut @RacelGallen. J'ai la réponse. :)