Comment faire défiler verticalement les longs menus déroulants Bootstrap?

J'ai obtenu le site responsive suivant pour fonctionner comme je le veux sur tous les appareils. Le seul problème restant est pour faire défiler le menu déroulant de sorte que lorsque le nombre d'options dans le menu déroulant est plus que peut s'adapter sur l'écran de l'appareil, il existe un moyen de le faire défiler.Comment faire défiler verticalement les longs menus déroulants Bootstrap?

Ces menus déroulants permettent de faire défiler pendant le développement de cet exemple (http://tanguay.info/testmenu2). Mais puisque j'avais besoin d'ajouter des hauteurs fixes, etc. pour obtenir ce design comme il est, il a beaucoup de ces menus déroulants incrustables. Comment puis-je récupérer cette fonctionnalité de défilement tout en conservant les fonctionnalités actuelles du site, c'est-à-dire avec le pied de page qui reste en place?

Voici à quoi il ressemble dans les vues Smartphone et ordinateur:

Smartphone:

Ordinateur:

Vous pouvez consulter ce site de test ici: http://tanguay.info/testmenu

Vous pouvez télécharger le code ici: http://tanguay.info/testmenu/testmenu.zip

Voici le code HTML:

<!DOCTYPE html> 
<html> 
    <head> 
     <meta name="viewport" content="width=device-width, initial-scale=1">  
     <link rel="stylesheet" type="text/css" href="index_fichiers/bootstrap.css"> 
     <link rel="stylesheet" type="text/css" href="index_fichiers/bootstrap_custom_extensions.css"> 
     <link rel="stylesheet" type="text/css" href="index_fichiers/bootstrap_override.css"> 
     <link rel="stylesheet" type="text/css" href="index_fichiers/system_navbarResponsiveSite.css"> 
     <link rel="stylesheet" type="text/css" href="index_fichiers/system_reset.css"> 
     <link rel="stylesheet" type="text/css" href="index_fichiers/system_developer.css"> 
     <link rel="stylesheet" type="text/css" href="index_fichiers/system_main.css"> 
     <link rel="stylesheet" type="text/css" href="index_fichiers/custom_main.css"> 
     <link rel="stylesheet" type="text/css" href="index_fichiers/font-awesome.css"> 
     <link rel="stylesheet" type="text/css" href="index_fichiers/lt.css"> 
     <script src="index_fichiers/jquery-2.js"></script> 
     <script src="index_fichiers/bootstrap.js"></script> 
     <script src="index_fichiers/qtools.js"></script> 
     <script src="index_fichiers/system_main.js"></script> 
     <script src="index_fichiers/angular.js"></script> 
     <style type="text/css"> 
      /* page-level CSS */ 
     </style> 
    </head> 
    <body> 
     <div class="container"> 
      <nav class="navbar navbar-inverse navbar-fixed-top"> 
       <div class="container-fluid">      
        <div class="navbar-header pull-left"> 
         <div class="navHeaderArea"> 
          <div class="theUser" onclick="location.href = '?';">The Test Site</div> 
          <div class="clear"></div>     
         </div> 
        </div>  
        <ul class="nav navbar-nav navbar-right"> 
         <li class="dropdown pull-right active"> 
          <a href="#" data-toggle="dropdown" class="dropdown-toggle">MENU</a> 
          <ul class="dropdown-menu"> 
           <li><a href="#">Test Page #1</a></li> 
           <li><a href="#">Test Page #2</a></li> 
           <li><a href="#">Test Page #3</a></li> 
           <li><a href="#">Test Page #4</a></li> 
           <li><a href="#">Test Page #5</a></li> 
           <li><a href="#">Test Page #6</a></li> 
           <li><a href="#">Test Page #7</a></li> 
           <li><a href="#">Test Page #8</a></li> 
           <li><a href="#">Test Page #9</a></li> 
           <li><a href="#">Test Page #10</a></li> 
           <li><a href="#">Test Page #11</a></li> 
           <li><a href="#">Test Page #12</a></li> 
           <li><a href="#">Test Page #13</a></li> 
           <li><a href="#">Test Page #14</a></li> 
           <li><a href="#">Test Page #15</a></li> 
           <li><a href="#">Test Page #16</a></li> 
           <li><a href="#">Test Page #17</a></li> 
           <li><a href="#">Test Page #18</a></li> 
           <li><a href="#">Test Page #19</a></li> 
           <li><a href="#">Test Page #20</a></li> 
          </ul>        
         </li> 
        </ul>     
       </div> 
      </nav> 
      <div class="pageContent"><div ng-app="mainModule" ng-controller="mainController" class="angular-hide-during-page-load ng-scope"> 
        <h1 class="showcaseTitle">Test Page</h1> 
        <div class="showcaseDescription">This is a test page that shows how the menu extends to far past the bottom of the screen.</div> 
        <div class="panel panel-primary"> 
         <div class="panel-heading ng-binding">Input Text</div> 
         <div class="panel-body"> 

          <div>line #0</div><div>line #1</div><div>line #2</div><div>line #3</div><div>line #4</div><div>line #5</div><div>line #6</div><div>line #7</div><div>line #8</div><div>line #9</div><div>line #10</div><div>line #11</div><div>line #12</div><div>line #13</div><div>line #14</div><div>line #15</div><div>line #16</div><div>line #17</div><div>line #18</div><div>line #19</div><div>line #20</div><div>line #21</div><div>line #22</div><div>line #23</div><div>line #24</div><div>line #25</div><div>line #26</div><div>line #27</div><div>line #28</div><div>line #29</div><div>line #30</div><div>line #31</div><div>line #32</div><div>line #33</div><div>line #34</div><div>line #35</div><div>line #36</div><div>line #37</div><div>line #38</div><div>line #39</div><div>line #40</div><div>line #41</div><div>line #42</div><div>line #43</div><div>line #44</div><div>line #45</div><div>line #46</div><div>line #47</div><div>line #48</div><div>line #49</div><div>line #50</div><div>line #51</div><div>line #52</div><div>line #53</div><div>line #54</div><div>line #55</div><div>line #56</div><div>line #57</div><div>line #58</div><div>line #59</div><div>line #60</div><div>line #61</div><div>line #62</div><div>line #63</div><div>line #64</div><div>line #65</div><div>line #66</div><div>line #67</div><div>line #68</div><div>line #69</div><div>line #70</div><div>line #71</div><div>line #72</div><div>line #73</div><div>line #74</div><div>line #75</div><div>line #76</div><div>line #77</div><div>line #78</div><div>line #79</div><div>line #80</div><div>line #81</div><div>line #82</div><div>line #83</div><div>line #84</div><div>line #85</div><div>line #86</div><div>line #87</div><div>line #88</div><div>line #89</div><div>line #90</div><div>line #91</div><div>line #92</div><div>line #93</div><div>line #94</div><div>line #95</div><div>line #96</div><div>line #97</div><div>line #98</div><div>line #99</div><div>line #100</div> 
         </div> 
        </div> 
       </div> 
      </div> 
      <div class="pageFooter"> 
       <div class="page_Footer_left">The Footer</div> 
       <div class="page_Footer_right"> 
       </div> 
      </div> 
     </div> 
    </body> 
</html>

Source

2016-11-19 Edward Tanguay

Vous pouvez le faire en spécifiant max-height et overflow-y sur le menu déroulant:

.dropdown-menu{ 
    max-height: 400px; 
    overflow-y: auto; 
}

Vous pouvez calculer la hauteur max en JS ou utiliser des unités viewport. Par exemple, si vous souhaitez que votre liste déroulante remplisse l'espace jusqu'au bas de la page, vous pouvez utiliser: max-height: calc(100vh - 50px), où 50px est la hauteur de votre en-tête.

Notez que dans la solution ci-dessus, la liste de gauche ne défile pas indépendamment de la liste déroulante. Une fois que vous atteignez la fin de la liste déroulante, il continuera à faire défiler la liste. Pour éviter cela, faire déborder le panneau ainsi:

.panel.panel-primary{ 
    max-height: 60vh; 
    overflow-y: auto; 
}

Encore une fois, cela dépend de votre cas d'utilisation sur la façon de s'y prendre pour calculer les hauteurs max.

Source

2016-11-19 13:03:08 aandrei

Merci, le 'max-height: calc (100vh - 50px) 'et' overflow-y: auto' fonctionne parfaitement dans tous les appareils sur lesquels je l'ai testé, affichant uniquement une barre de défilement lorsque cela est nécessaire pour la hauteur de ce périphérique: http://tanguay.info/testmenu4 –

S'il vous plaît, essayez ceci:

.dropdown-menu 
{ 
    max-height: 200px; 
    overflow-y: scroll; 
    }

La limite propriété max-height la hauteur maximale.

Source

2016-11-19 12:49:06

Merci, ceci est une solution simple et agréable et a l'air bien et a une bonne fonctionnalité d'utilisateur dans mon navigateur de téléphone intelligent et les émulateurs d'ipad: http://tanguay.info/testmenu3 –

il sera défilement lorsque le récipient externe a fixé la hauteur et a overflow:scrolloverflow:auto ou dans css

si .dropdown-menu pour les dispositifs mobiles doivent avoir une hauteur fixe en fonction de la hauteur de l'écran. il peut être réalisé en utilisant la hauteur de la fenêtre de la propriété css (ceci va se confondre avec le périphérique) max-height:80vh (changez cela en fonction de vos besoins). regarde dedans.

alors ajoutez overflow:auto et max-height:80vh à .dropdown-menu pour le faire fonctionner.

Source

2016-11-19 12:49:26 raj

Comment faire défiler verticalement les longs menus déroulants Bootstrap?

Répondre

Questions connexes