बूटस्ट्रैप के साथ स्क्रॉल करने योग्य मेनू - मेनू अपने कंटेनर का विस्तार करता है जब यह नहीं होना चाहिए

Question

मैंने बूटस्ट्रैप के साथ स्क्रॉल करने योग्य मेनू को सक्षम करने के लिए इस विधि ( उनकी फिडेल ) की कोशिश की , लेकिन उस दृष्टिकोण के साथ, स्क्रॉल करने योग्य मेनू अपने कंटेनर - फिडेल - गैर-स्क्रॉल करने योग्य मेनू को सही ढंग से विस्तारित करता है, ऐसा नहीं करता है।

मैं इसे कैसे ठीक करूं? बूटस्ट्रैप के साथ संगत अन्य दृष्टिकोणों के सुझावों की भी सराहना की जाती है!

---

संदर्भ के लिए, यहाँ पहली विधि से HTML है:

<ul class="nav">
    <li class="dropdown">
        <a class="icon-key icon-white" data-toggle="dropdown" href="#" style=
        "font-weight: bold"></a>

        <div class="dropdown-menu" style="margin-left: 2em">
            <ul class="dropdown-menu">
                <!-- static non-scrollable menu header 1 -->
            </ul>
        </div>

        <div class="dropdown-menu" style="margin-left: 2em">
            <ul class="dropdown-menu">
                <li class="disabled">
                    <a href="#"><i class="icon-group"></i> <b>My Groups</b></a>
                </li>

                <li>
                    <div class="dropdown-menu scroll-menu scroll-menu-2x"
                    style="margin-left: 2em">
                        <ul class="dropdown-menu scroll-menu scroll-menu-2x">
                            <li>
                                <a href="#">User</a>
                            </li>

                            <li>
                                <a href="#">Administrators</a>
                            </li>

                            <li>
                                <a href="#">Some Other Group</a>
                            </li>
                        </ul>
                    </div>

                    <ul class="dropdown-menu scroll-menu scroll-menu-2x">
                        <!-- Additional menu items omitted for brevity -->
                    </ul>
                </li>
            </ul>
        </div>

        <div class="dropdown-menu" style="margin-left: 2em">
            <ul class="dropdown-menu">
                <!-- static non-scrollable menu header 2 -->
            </ul>
        </div>

        <div class="dropdown-menu" style="margin-left: 2em">
            <ul class="dropdown-menu">
                <li class="disabled">
                    <a href="#"><i class="icon-user"></i> <b>My Roles</b></a>
                </li>

                <li>
                    <div class="dropdown-menu scroll-menu scroll-menu-2x"
                    style="margin-left: 2em">
                        <ul class="dropdown-menu scroll-menu scroll-menu-2x">
                            <li>
                                <a href="#">Core Users</a>
                            </li>

                            <li>
                                <a href="#">Admin</a>
                            </li>

                            <li>
                                <a href="#">Some Other Role</a>
                            </li>
                        </ul>
                    </div>

                    <ul class="dropdown-menu scroll-menu scroll-menu-2x">
                        <!-- Additional menu items omitted for brevity -->
                    </ul>
                </li>
            </ul>
        </div>

        <div class="dropdown-menu" style="margin-left: 2em">
            <ul class="dropdown-menu">
                <!-- static non-scrollable menu footer -->
            </ul>
        </div>

        <ul class="dropdown-menu">
            <li class="disabled">
                <a href="#"><i class="icon-chevron-up pull-left"></i> <i class="icon-chevron-up pull-right"></i></a>
            </li>
        </ul>
    </li>
</ul>

और सीएसएस:

/* So we wont impact the original bootstrap menu or it's pseudo call-out
arrow the menu is wrapped in a sub dropdown-menu with a chained scroll-menu */
ul.scroll-menu {
    position:relative;
    display:inherit!important;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    -moz-overflow-scrolling:touch;
    -ms-overflow-scrolling:touch;
    -o-overflow-scrolling:touch;
    overflow-scrolling:touch;
    top:0!important;
    left:0!important;
    width:100%;
    height:auto;
    max-height:500px;
    margin:0;
    border-left:none;
    border-right:none;
    -webkit-border-radius:0!important;
    -moz-border-radius:0!important;
    -ms-border-radius:0!important;
    -o-border-radius:0!important;
    border-radius:0!important;
    -webkit-box-shadow:none;
    -moz-box-shadow:none;
    -ms-box-shadow:none;
    -o-box-shadow:none;
    box-shadow:none
}

Comments

यह बूटस्ट्रैप V4

— Tes3awy

Answer 1

मुझे लगता है कि आप अपने विशेष स्क्रॉल करने योग्य मेनू वर्ग में आवश्यक CSS गुणों को जोड़कर इसे सरल बना सकते हैं ..

सीएसएस:

.scrollable-menu {
    height: auto;
    max-height: 200px;
    overflow-x: hidden;
}

एचटीएमएल

       <ul class="dropdown-menu scrollable-menu" role="menu">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li><a href="#">Action</a></li>
            ..
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
       </ul>

काम करने का उदाहरण: https://www.bootply.com/86116

बूटस्ट्रैप ४

फ्लेक्सबॉक्स का उपयोग करके बूटस्ट्रैप 4 के लिए एक और उदाहरण

Comments

यदि कोई बूटलाइनर पर प्लंकर पसंद करता है, तो यह यहां है: plnkr.co/edit/3VhYW1?p=preview

— tanguy_k

स्क्रॉलबार कुछ पाठ को काट देता है। मैं सोच रहा हूं कि चौड़े आइटम को समायोजित करने के लिए सबसे साफ तरीका क्या है।

— १

क्या होगा अगर मैं ड्रॉपडाउन मेनू में फिक्स्ड हेडर और फूटर्स चाहता हूं

— नवाचार

मैंने अधिकतम ऊँचाई का उपयोग किया: 100vh को 100% ऊँचाई देने के लिए

— Rob Sedgwick

बहुत सुंदर और सुपर सरल समाधान। +1

— गियानलुका गेथिनी

Answer 2

आप ड्रॉपडाउन के स्पैन तत्व के अंदर बूटस्ट्रैप 3 में बिल्ट-इन सीएसएस क्लास प्री-स्क्रॉलेबल का उपयोग कर सकते हैं और यह कस्टम सीएसएस को लागू किए बिना तुरंत काम करता है।

 <ul class="dropdown-menu pre-scrollable">
                <li>item 1 </li>
                <li>item 2 </li>

 </ul>

Answer 3

CSS के लिए, मैंने पाया कि ब्राउजर क्रोम दिखाते समय 180 की अधिकतम ऊंचाई मोबाइल फोन लैंडस्केप 320 के लिए बेहतर है।

.scrollable-menu {
    height: auto;
    max-height: 180px;
    overflow-x: hidden;
}

इसके अलावा, दृश्यमान स्क्रॉलबार जोड़ने के लिए, इस सीएसएस को चाल करनी चाहिए:

.scrollable-menu::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 4px;        
}    
.scrollable-menu::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background-color: lightgray;
    -webkit-box-shadow: 0 0 1px rgba(255,255,255,.75);        
}

परिवर्तन यहाँ परिलक्षित होते हैं: https://www.bootply.com/BhkCKFEELL

Answer 4

उल टैग की इनलाइन में सब कुछ करें

<ul class="dropdown-menu scrollable-menu" role="menu" style="height: auto;max-height: 200px; overflow-x: hidden;">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li><a href="#">Action</a></li>
                ..
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
            </ul>

Answer 5

मैं अपनी परियोजना में इस समस्या को ठीक करता हूं-

सीएसएस कोड

.scroll-menu{
   min-width: 220px;
   max-height: 90vh;
   overflow: auto;
 }

HTML कोड

<ul class="dropdown-menu scroll-menu" role="menu">
   <li><a href="#">Action</a></li>
   <li><a href="#">Another action</a></li>
   <li><a href="#">Something else here</a></li>
   <li><a href="#">Action</a></li>
   ..
   <li><a href="#">Action</a></li>
   <li><a href="#">Another action</a></li>
</ul>

Answer 6

मुझे उम्मीद है कि यह कोड अच्छी तरह से काम कर रहा है, यह प्रयास करें।

सीएसएस फ़ाइल जोड़ें।

.scrollbar {
    height: auto;
    max-height: 180px;
    overflow-x: hidden;
}

HTML कोड:

<div class="col-sm-2  scrollable-menu" role="menu">
    <div>
   <ul>
  <li><a class="active" href="#home">Tutorials</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>

    </ul>
   </div>
   </div>