Материализация CSS вкладка не демонстрирует поведение прокрутки - PullRequest
Новая
       13

Материализация CSS вкладка не демонстрирует поведение прокрутки

0 голосов
/ 17 мая 2019

Я не уверен, почему мой элемент tabs не показывает поведение прокрутки.Кажется, что элементы li на вкладках ul просто переполняют следующую строку, как показано здесь .

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

Codepen (проблема с прокруткой здесь не показана, просто есть код, поскольку онсерия)

1 Ответ

0 голосов
/ 17 мая 2019

Несколько вещей, которые я вижу:

  • В вашем Codepen есть опечатка: {swipable: true} -> {swipeable: true}
  • Вы используете jQuery, но в коде ручки нет jQuery, включите его в свой код
  • Пожалуйста, проверьте документацию вкладок на этой странице: https://materializecss.com/tabs.html#swipeable

Как вы видите в HTML, для UL используется следующая разметка: 

<ul id="tabs-swipe-demo" class="tabs">
    <li class="tab col s3"><a href="#test-swipe-1">Test 1</a></li>
    <li class="tab col s3"><a class="active" href="#test-swipe-2">Test 2</a></li>
    <li class="tab col s3"><a href="#test-swipe-3">Test 3</a></li>
  </ul>

Важно то, что они используют идентификатор a href для связи с идентификатором элемента DIV, например: #test-swipe-1.

Div ELEMENTS: 

  <div id="test-swipe-1" class="col s12 blue">Test 1</div>
  <div id="test-swipe-2" class="col s12 red">Test 2</div>
  <div id="test-swipe-3" class="col s12 green">Test 3</div>

Таким образом, Materialise знает, какой DIV ID он должен показывать выше

...