Iframe hauteur responsive dans un article

Réduire
X
 
  • Filtrer
  • Heure
  • Afficher
Tout effacer
nouveaux messages

  • [RÉGLÉ] Iframe hauteur responsive dans un article

    Bonjour à tous,

    J'essaye intégrer un iframe responsive dans un article.
    Dans cette iframe, je pointe vers l'url d'un autre site.
    Mon problème est que je n'arrive pas à obtenir la bonne hauteur pour cet iframe, un ascenseur vertical apparait alors que je n'en veut pas.

    Pouvez-m'aider à résoudre ce problème ?

    Merci.

  • #2
    Bonjour,

    Quel code utilisez-vous ?
    Une URL pour voir le problème ?
    UP, le plugin universel à découvrir sur https//up.lomart.fr
    bgMax
    , AdminOrder, MetaData, Zoom, ArtPlug, Custom, Memo, Filter, ... sur http://lomart.fr/extensions

    Commentaire


    • #3
      Bonjour Iomart,

      Difficile de joindre une URL pour l'instant, en effet je teste sur mon site de test avant de publier en ligne.

      Sinon dans mon article j'ai inséré le code suivant :
      <p>
      <iframe src="https://www.donnerenligne.fr/burkina-sante/faire-un-don" id="haWidget"></iframe>
      </p>


      Dans mon fichier CSS j'ai mis le code suivant :

      #haWidget{
      width : 95%;
      min-height: 800px;
      overflow: hidden;
      border: none;
      background: #E3C3AA;
      -moz-border-radius: 10px;
      -webkit-border-radius: 10px;
      border-radius: 10px;
      padding:20px;
      margin-top: 40px;
      margin-left:10px;
      }

      Mon soucis est la hauteur de l'iframe qui ne s'adapte pas.
      J'aimerai que le contenu de l'iframe, donc le formulaire appelé, s'affiche entièrement dans mon article.

      Espérant avoir été clair sur l'exposé de mon problème.

      Cordialement.

      Commentaire


      • #4
        L'ascenseur est sur #haWidget ou sur le bloc inclus ?
        UP, le plugin universel à découvrir sur https//up.lomart.fr
        bgMax
        , AdminOrder, MetaData, Zoom, ArtPlug, Custom, Memo, Filter, ... sur http://lomart.fr/extensions

        Commentaire


        • #5
          L'ascenseur est sur #haWidget, voir image jointe.

          Commentaire


          • #6
            A la sauvage en augmentant min-height de ##haWidget, cela donne quoi ?
            UP, le plugin universel à découvrir sur https//up.lomart.fr
            bgMax
            , AdminOrder, MetaData, Zoom, ArtPlug, Custom, Memo, Filter, ... sur http://lomart.fr/extensions

            Commentaire


            • #7
              En augmentant le min-height j'arrive effectivement à augmenter la hauteur de l'iframe et ainsi à supprimer l'ascenseur.
              Par contre si je réduit la largeur de mon explorateur, le contenu de l'iframe passe de 3 à 1 colonnes et là l'ascenseur réapparait.

              J'ai mis mes modifications en ligne, site www.burkina-sante.org, menu nous soutenir puis faire un don en ligne.

              Commentaire


              • #8
                Tentez de mettre overflow:visible

                Par contre si je réduit la largeur de mon explorateur, le contenu de l'iframe passe de 3 à 1 colonnes et là l'ascenseur réapparait.
                Ca se règle à coup de media-queries
                Code:
                [USER="80685"]media[/USER] (max-width:760px ) {
                  #haWidget {min-height:2500px;}
                }
                UP, le plugin universel à découvrir sur https//up.lomart.fr
                bgMax
                , AdminOrder, MetaData, Zoom, ArtPlug, Custom, Memo, Filter, ... sur http://lomart.fr/extensions

                Commentaire


                • #9
                  Super, j'ai réussi à modifier la hauteur de l'iframe en fonction de la taille de l'écran grâce au "media-queries".

                  Merci Iomart.

                  Commentaire

                  Annonce

                  Réduire
                  Aucune annonce pour le moment.

                  Partenaire de l'association

                  Réduire

                  Hébergeur Web PlanetHoster
                  Travaille ...
                  X