Scrollable Menu with Bootstrap - Меню, расширяющее свой контейнер, когда оно не должно

Question

Scrollable Menu with Bootstrap - Меню, расширяющее свой контейнер, когда оно не должно

106

Я попробовал этот метод (их скрипку), чтобы включить прокручиваемое меню с помощью Bootstrap, но с таким подходом, прокручиваемое меню расширяет свой контейнер - fiddle - неправильно прокручиваемое меню, не делает этого.

Как я могу это исправить? Предложения по другим подходам, совместимым с Bootstrap, тоже оценены!

Для справки, вот 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>

И CSS:

/* So we wont impact the original bootstrap menu or it 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
}

eliashdezr 07 окт. 2013, в 14:33

Источник

1

Это также работает для Bootstrap V4
Tes3awy 08 янв. 2018, в 14:03

Теги:

twitter-bootstrap

css

scrollable

6 ответов

15

Вы можете использовать встроенный CSS-класс предварительно прокручиваемый в bootstrap 3 внутри элемента span в раскрывающемся списке, и он работает сразу же без реализации пользовательского css.

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

 </ul>

Adrian Hedley 23 окт. 2017, в 15:47

11

Для CSS я обнаружил, что максимальная высота 180 лучше для пейзажей 320 мобильных телефонов при отображении браузера хром.

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

Кроме того, чтобы добавить видимые полосы прокрутки, этот CSS должен сделать трюк:

.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

blalond 18 май 2015, в 18:06

1

Я просто исправляю эту проблему в своем проекте -

CSS-код

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

Jilani A 26 май 2017, в 07:20

1

Сделайте все в встроенном теге UL

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

Rajeshwar Reddy 12 сен. 2016, в 21:20

0

Надеюсь, этот код работает хорошо, попробуйте это.

добавить файл css.

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

Darshak Malvi 05 май 2016, в 09:23

Ещё вопросы

Zim · Accepted Answer · 2013-10-07T17-02-00.000Z

Я думаю, вы можете упростить это, просто добавив необходимые свойства CSS в свой специальный класс прокручиваемого меню.

CSS:

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

HTML

            <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

Если кто-то предпочитает Plunker Bootply, вот он: plnkr.co/edit/3VhYW1?p=preview
Полоса прокрутки обрезает часть текста. Мне интересно, как лучше всего увеличить размер, чтобы вместить самый широкий предмет.
Что делать, если я хочу фиксированные верхние и нижние колонтитулы в выпадающем меню
Я использовал max-height: 100vh, чтобы получить 100% высоты
Очень элегантное и супер простое решение. +1
Ребята, я вставляю последний элемент li с разделителем и хочу, чтобы он не прокручивался. Таким образом, первый элемент x в раскрывающемся списке должен быть прокручиваемым, а последний после разделителя всегда должен быть видимым и не прокручиваемым. Есть ли такое простое решение?
Это не сработало для меня на iPhone 6.
@ZimSystem, как мы можем управлять подменю многоуровневой прокрутки
Спасибо! ты сэкономил мне немного времени. : D: D: D