বুটস্ট্র্যাপ সহ স্ক্রোলযোগ্য মেনু - মেনু যখন তার ধারকটি প্রসারিত করা উচিত নয় তখন

Question

বুটস্ট্র্যাপের সাহায্যে স্ক্রোলযোগ্য মেনু সক্ষম করার জন্য আমি এই পদ্ধতিটি ( তাদের ফ্রিডল ) চেষ্টা করেছি , তবে এই পদ্ধতির সাহায্যে স্ক্রোলযোগ্য মেনুটি তার ধারক - ফিডল - নন-স্ক্রোলযোগ্য মেনুটি সঠিকভাবে প্রসারিত করে না।

আমি এটা কিভাবে ঠিক করবো? বুটস্ট্র্যাপের সাথে সামঞ্জস্যপূর্ণ অন্যান্য পদ্ধতির পরামর্শগুলিও প্রশংসাযোগ্য!

---

রেফারেন্সের জন্য, এখানে প্রথম পদ্ধতির ফিডল থেকে এইচটিএমএল রয়েছে:

<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

এটি বুটস্ট্র্যাপ ভি 4 এর জন্যও কাজ করে

— Tes3awy

Answer 1

আমি মনে করি আপনি কেবল নিজের বিশেষ স্ক্রোলযোগ্য মেনু শ্রেণিতে প্রয়োজনীয় সিএসএস বৈশিষ্ট্য যুক্ত করে এটি সহজ করতে পারেন ..

সিএসএস:

.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

ফ্লেক্সবক্স ব্যবহার করে বুটস্ট্র্যাপ 4 এর আরেকটি উদাহরণ

Comments

যদি কেউ বুটপ্লাইয়ের উপর প্লানকারকে পছন্দ করেন তবে তা এখানে: plnkr.co/edit/3VhYW1?p=preview

— tanguy_k

স্ক্রোলবার কিছু পাঠ্য কেটে দেয়। আমি ভাবছি সবচেয়ে প্রশস্ততম উপায়টি প্রশস্ত আইটেমের জন্য আকার বাড়ানো mod

— লিন্টমাউস

ড্রপডাউন মেনুতে স্থির শিরোনাম এবং পাদচরণগুলি চাইলে কী হবে

— ইনোভেশন

আমি সর্বোচ্চ-উচ্চতা ব্যবহার করেছি: 100% উচ্চতা দিতে 100vh

— রব সেডগউইক

খুব মার্জিত এবং সুপার সহজ সমাধান। +1

— জিয়ানলুকা ঘেটিনি

Answer 2

আপনি ড্রপডাউনটির স্প্যান উপাদানটির অভ্যন্তরে বুটস্ট্র্যাপ 3 -এ বিল্ট-ইন সিএসএস ক্লাস প্রি-স্ক্রোলবল ব্যবহার করতে পারেন এবং এটি কাস্টম সিএসএস প্রয়োগ না করে অবিলম্বে কাজ করে।

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

 </ul>

Answer 3

সিএসএসের জন্য, আমি খুঁজে পেয়েছি যে ব্রাউজারের ক্রোম দেখানোর সময় মোবাইল ফোনের ল্যান্ডস্কেপ 320 এর জন্য সর্বোচ্চ 180 এর উচ্চতা আরও ভাল।

.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;
 }

এইচটিএমএল কোড

<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;
}

এইচটিএমএল কোড:

<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>