Semantic-UI - боковая панель с контекстом -> пришлось переместить боковую панель

Question

Я пытаюсь открыть боковую панель в контексте контейнера и пытался следовать приведенному образцу кода на сайте документации (https://semantic -ui.com / modules / sidebar.html # using-a -custom-context )

однако, я не понимаю, как это работает для меня, потому что все, что я пробовал, приводит к:

• Боковая панель: пришлось добавить элемент толкателя. Для оптимальной производительности убедитесь, что содержимое тела внутри элемента толкателя
• Боковая панель: пришлось переместить боковую панель. Для оптимальной производительности убедитесь, что боковая панель и толкатель прямые тег детей вашего тела

ошибка ..

мой (упрощенный) HTML выглядит так:

<div class="ui main fluid container">
  <div class="sidebar-container">
    <div class="ui center aligned text container">
      <button class="ui basic open search button">
      Filter Instruments
    </button>
    </div>
    <div class="sidebar-content pushable">
      <div class="ui top sidebar">
        search form
      </div>
      <div class="pusher">
        search results
      </div>
    </div>
  </div>
</div>

и я пытаюсь инициализировать боковую панель с помощью этого js:

$(document).ready(function() {
  var widest = 0;
  $('.sidebar-container .ui.sidebar')
    .sidebar('setting', 'transition', 'push')
    .sidebar({
      context: $('.sidebar-container .sidebar-content'),
      onVisible: function() {
        $('.open.search.button').text('Close Filter');
      },
      onHide: function() {
        $('.open.search.button').text('Open Filter');
      }
    })
    .sidebar('attach events', '.sidebar-container .open.search');
})

Я создал эту скрипку https://jsfiddle.net/r72mftaq/4/

любой намек на то, что я делаю неправильно, высоко ценится!

спасибо, Andreas