Forum |  HardWare.fr | News | Articles | PC | Prix | S'identifier | S'inscrire | Aide | Shop Recherche
2120 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Boostrap 4 modal: bug sur Iphone

 



 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Boostrap 4 modal: bug sur Iphone

n°2325274
tompouss
Petit chat
Posté le 03-12-2018 à 10:43:19  profilanswer
 

Bonjour,
 
j'ai un petit soucis avec une modale sur Mac et iphone.
 
le 3/4 de cette modale est coupée et donc illisible sur Iphone X et 6s (chrome et safari) et mac (safari, chrome semble ok).
Pas de problème sur Window, android (chrome, opera et firefox ok)
 
le site est sur Boostrap 4 beta 2
 
 
http://tof.cx/image/CwFV6
http://tof.cx/image/CwpAV
http://tof.cx/image/Cw4l1
 
 
 
le css

Code :
  1. .modal {
  2.   margin-bottom: 0px!important;
  3. }
  4. .modal-body {
  5.   overflow-x: hidden;
  6.   overflow-y: scroll;
  7.   max-height: 200px;
  8. }
  9. #rgpd-modal .close-modal{
  10.   visibility: hidden;
  11. }
  12. #rgpd_button-close{
  13.   cursor: pointer;
  14. }
  15. .modal.left .modal-dialog{
  16.   -webkit-transition: opacity 0.3s linear, left 0.3s ease-out;
  17.   -moz-transition: opacity 0.3s linear, left 0.3s ease-out;
  18.   -o-transition: opacity 0.3s linear, left 0.3s ease-out;
  19.   transition: opacity 0.3s linear, left 0.3s ease-out;
  20.   overflow-y: auto;
  21.   top:auto;
  22.   right:auto;
  23.   left:1rem;
  24.   bottom:0;
  25.   position: fixed;
  26. }
  27. /* Portrait */
  28. @media only screen
  29. and (min-device-width: 320px)
  30. {
  31.   #rgpd-modal{
  32.     width: 5rem;
  33.     max-width: 5rem;
  34.   }
  35.   .modal-dialog{
  36.     max-width: 352px;
  37.   }
  38. }
  39. @media only screen
  40. and (min-device-width: 768px)
  41. {
  42.   .modal-dialog{
  43.     max-width:645px
  44.   }
  45. }


 
HTML

Code :
  1. <!-- ***** RGPD modal start ***** -->
  2. <div class="modal left" id="rgpd-modal" tabindex="-1" role="dialog" aria-hidden="true">
  3.       <div class="modal-dialog" role="document">
  4.           <div class="modal-content">
  5.               <div class="modal-header">
  6.                   <h5 class="modal-title"><p><?=$lang['RGPD']['MODAL_TITLE'];?></p></h5>
  7.                   <button type="button" class="close" data-dismiss="modal" aria-label="Close" data-target="#rgpd-modal">
  8.                       <span aria-hidden="true">&times;</span>
  9.                   </button>
  10.               </div>
  11.               <div class="modal-body">
  12.                   <table class="table">
  13.                       <tr>
  14.                           <td><?=$lang['RGPD']['RGPD_RESPONSIBLE_PARTY']['TITLE']?></td>
  15.                           <td><?=$lang['RGPD']['RGPD_RESPONSIBLE_PARTY']['TEXT']?></td>
  16.                       </tr>
  17.                       <tr>
  18.                           <td><?=$lang['RGPD']['RGPD_PURPOSE']['TITLE']?></td>
  19.                           <td><?=$lang['RGPD']['RGPD_PURPOSE']['TEXT']?></td>
  20.                       </tr>
  21.                       <tr>
  22.                           <td><?=$lang['RGPD']['RGPD_Legitimization']['TITLE']?></td>
  23.                           <td><?=$lang['RGPD']['RGPD_Legitimization']['TEXT']?></td>
  24.                       </tr>
  25.                       <tr>
  26.                           <td><?=$lang['RGPD']['RGPD_Recipients']['TITLE']?></td>
  27.                           <td><?=$lang['RGPD']['RGPD_Recipients']['TEXT']?></td>
  28.                       </tr>
  29.                       <tr>
  30.                           <td><?=$lang['RGPD']['RGPD_Rights_TITLE']?></td>
  31.                           <td><?=$lang['RGPD']['RGPD_Rights_line1']?>
  32.                               <ul>
  33.                                   <li>- <?=$lang['RGPD']['RGPD_Rights_line2']?></li>
  34.                                   <li>- <?=$lang['RGPD']['RGPD_Rights_line3']?></li>
  35.                                   <li>- <?=$lang['RGPD']['RGPD_Rights_line4']?></li>
  36.                                   <li>- <?=$lang['RGPD']['RGPD_Rights_line5']?></li>
  37.                                   <li>- <?=$lang['RGPD']['RGPD_Rights_line6']?></li>
  38.                               </ul>
  39.                           </td>
  40.                       </tr>
  41.                       <tr>
  42.                           <td><?=$lang['RGPD']['RGPD_Additional_Information']['TITLE']?></td>
  43.                           <td><?=$lang['RGPD']['RGPD_Additional_Information']['TEXT']?></td>
  44.                       </tr>
  45.                   </table>
  46.               </div>
  47.               <div class="modal-footer">
  48.                   <button id="rgpd_button-close" type="button" data-keyboard="true" data-toggle="modal" class="btn btn-secondary" data-dismiss="modal" data-backdrop="true" data-target="#rgpd-modal">Close</button>
  49.               </div>
  50.           </div>
  51.       </div>
  52.   </div>


 
Auriez-vous une idée de comment fixer cela ? (j'ai un peu cherché sur internet mais je n'ai rien trouvé concernant ce bug en particulier)
 
Merci d avance


Message édité par tompouss le 03-12-2018 à 10:44:44
mood
Publicité
Posté le 03-12-2018 à 10:43:19  profilanswer
 

n°2325289
gelatine_v​elue
Posté le 03-12-2018 à 14:04:55  profilanswer
 

Tu saurais faire un codepen ou un jsfiddle avec ton pb?  
Ce serait plus facile a diagnostiquer.


---------------
Vends des trucs sur Bdx
n°2325297
tompouss
Petit chat
Posté le 03-12-2018 à 14:28:32  profilanswer
 

voici:
 
 
https://codepen.io/t0mspace/pen/GweYpX


---------------
collectionneur de pâtes thermiques
n°2325302
David Bori​ng
Posté le 03-12-2018 à 15:08:29  profilanswer
 

#rgpd-modal{
    width: 5rem;
    max-width: 5rem;
  }
 
Le problème est là, c'est plus petit que ta modal, donc elle est cropé car tu as un overflow: hidden
 
https://reho.st/preview/self/1bd6a2f7d94a5f533f71ef090d2d92900216ffb3.png


Message édité par David Boring le 03-12-2018 à 15:19:12
n°2325308
tompouss
Petit chat
Posté le 03-12-2018 à 16:15:27  profilanswer
 

Super merci pour vos réponses :)


---------------
collectionneur de pâtes thermiques
n°2325746
tompouss
Petit chat
Posté le 07-12-2018 à 08:56:47  profilanswer
 

Je comprends pas pq ce bug n'apparait que sur Mac, et pas sur PC ni android
 
Quelqu'un aurait une explication ?
 
et question subsidiaire:
 
Vu que le simulateur iphone de Chrome n'affichait pas ce bug,
Y a -t-il un autre moyen de simuler l'affichage d'une page web iphone ou un mac,  sur PC ?


---------------
collectionneur de pâtes thermiques

Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Boostrap 4 modal: bug sur Iphone

 

Sujets relatifs
Impossible de connaître la taille en cm d'un écran d'iphoneVersion d'iphone dans Google Analytics ?
'responsive' qui ne fonctionne pas sur iphone?[resolu]modal sur un onMouseDown au lieux du click souris
formulaire VBA modal[VBA][Excel] UserForm modeless dans une boucle
problème de superposition texte/image sur iphoneJavascript Detection Bouton Home Iphone quitter navigateur
Boostrap problème questionsIntégrer un tchat à un site web avec intéraction sur iphone
Plus de sujets relatifs à : Boostrap 4 modal: bug sur Iphone


Copyright © 1997-2018 Hardware.fr SARL (Signaler un contenu illicite) / Groupe LDLC / Shop HFR