3
votes

Position modale Bootstrap dans l'interface utilisateur WebView

Utilisation de Bootstrap 4.3.1

Sur mon site, les modaux fonctionnent parfaitement, en mode responsive également.

J'ai aussi une application Android qui, entre autres fonctions, contient mon site dans WebView. Lorsque je déclenche un modal dans WebView dans l'application, sur une longue page - il s'ouvre en haut de la page (pas centré verticalement) et s'il vous arrive de faire défiler à moitié la page, vous ne le verrez pas, car la position est fixé en haut, et vous devez maintenant faire défiler vers le HAUT pour le voir (si vous savez même qu'il est ouvert).

Encore une fois, dans une page Web de journal, sous forme mobile - le problème n'existe pas - uniquement dans WebView. Quelqu'un a-t-il rencontré ça?

C'est la position de Bootstrap pour le modal.

.modal {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1050;
    display: none;
    width: 100%;
    height: 100%;
    overflow: hidden;
    outline: 0;
}

Il semble que dans WebView, la position : fixe; est ignoré - car il est relatif à la fenêtre, donc s'il défile vers le bas, les modaux montent avec la page.

Les tests pour cela sont difficiles, car pour tester correctement, vous devez tester dans une application , dans un conteneur WebView (comme je l'ai mentionné, dans Chrome responsive sur mobile, ce problème n'existe pas).

android bootstrap-4 android-webview google-chrome-app

9 commentaires

Par hasard, avez-vous essayé de définir dans votre feuille de style .modal {position: fixed! Important}?

@Vega - oui, j'ai essayé ça. Dans Chrome, l'inspecteur d'appareil distant s'affiche en effet sous la forme position: fixed , mais en fait, sur l'appareil lui-même dans l'application - je défile à mi-chemin de la page ( dormi.co.il/users/test222.html ) et la fenêtre contextuelle modale est bloquée, en haut de la page, au-delà de l'écran supérieur où je ne peux pas la voir. Voir l'image ici: imgur.com/a/rsYq1QH

@Vega merci encore d'avoir essayé. Comme vous pouvez peut-être le voir dans l'image imgur, la position: fixed est bien appliquée (et non écrasée). mais cela semble être relatif au conteneur de vue Web plutôt qu'au conteneur d'application (l'écran de l'appareil). Ce qui signifie qu'il disparaît lorsque vous faites défiler. Cela clarifie-t-il le problème?

Avez-vous essayé de ne pas faire défiler le corps lorsque le modal est ouvert?

@kneidels Avez-vous essayé de placer enfin le html modal dans la balise body ??

@Vega - par défaut, c'est la fonctionnalité de bootstrap, voir getbootstrap.com/ docs / 4.3 / components / modal / # vertical-cente‌ red . le problème n'est pas cela, mais plutôt la position du modal, étant relative (ou fixée) au conteneur de vue Web (qui peut être masqué de la vue) plutôt qu'à l'écran réel.

@RahulKhurana - oui, j'ai essayé ça. En fait, même ce lien getbootstrap.com/docs/4.3/components/modal / # vertical-cente‌ red - l'exemple officiel, le modal ne s'ouvre pas correctement dans la configuration de la vue Web.

@kneidels j'ai essayé avec dormi.co.il/users/test222.html lien sur le webview natif Android et il ouvre le modal en première position.

pouvez-vous partager votre fichier de mise en page Android?

4 Réponses :

-2
votes

.edit-wrap
    z-index 999
    position fixed
    left 0
    right 0
    top 0
    bottom 0
    overflow hidden
    background rgba(0, 0, 0, 0.6)
    display flex
    .edit-container
        background #d1cdb7
        padding 1em 2em 1em 2em
        margin auto
This stylus demo works on my webview

1 commentaires

Merci. Le code n'est pas clair. aussi, pouvez-vous l'appliquer à la structure modale bootstrap standard?

0
votes

Vérifiez que les styles ci-dessous écrasent d'autres styles,

position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;

ressemble à un problème de rendu de style,

0 commentaires

0
votes

J'espère que cela fonctionnera pour vous.

Mettez-le dans une balise html javascript.

$('#here_put_modal_id').on('shown.bs.modal', function (e) {
   // here are code
   document.documentElement.scrollTop = 0
})

2 commentaires

Merci - c'est une solution intéressante, mais mauvaise en termes d'interface utilisateur. si j'ai une fenêtre contextuelle modale (liée à une partie spécifique de la page), je la perdrais lorsque la page défilerait vers le haut.

ceci est juste un exemple, vous pouvez changer la div cible comme targetemelent. scrollTop = 0

0
votes

Je souhaite publier une mise à jour et clore cette question avec une mise à jour pour toute personne rencontrant ce problème à l'avenir. Il s'est avéré qu'il y avait un bogue dans l'application et que le module "pull to refresh" interférait avec l'emplacement des popups. Dès que cela a été corrigé, le modal s'est ouvert dans sa position correcte, en fonction du code existant de bootstrap.

Merci à tous ceux qui ont essayé de vous aider.

2 commentaires

Pourriez-vous s'il vous plaît expliquer plus à ce sujet? J'ai le même problème.

@AhmadBudairi - il y avait un bogue dans la version Android - il était en conflit avec le code d'amorçage