Остановить семантический интерфейс от переполнения содержимого с помощью боковой панели

Я использую боковую панель Semantic UI на своей странице для навигации. По умолчанию я бы хотел, чтобы он был видимым с возможностью для пользователя закрыть его, если захочет. Проблема в том, что, открыв боковую панель по умолчанию, содержимое моей страницы вытесняется с экрана и переполняется, так что часть страницы отключается. Не видя ничего в документах о том, чтобы содержимое страницы соответствовало доступной ширине, а не удалялось с экрана.Остановить семантический интерфейс от переполнения содержимого с помощью боковой панели

$('.toggler').on('click', function() { 
 
\t $('.ui.sidebar').sidebar('toggle'); 
 
});

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>Semantic UI Sidebar test</title> 
 
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.4/semantic.min.css"> 
 
</head> 
 
<body> 
 
    <div class="ui left sidebar inverted vertical menu visible pushable"> 
 
    <a href="#" class="item">Sidebar Link</a> 
 
</div> 
 
<div class="ui pusher"> 
 
    <div class="ui menu"> 
 
    <a class="item toggler"> 
 
     Toggle 
 
    </a> 
 
    <div class="item header"> 
 
     Semantic UI 
 
    </div> 
 
     <div class="menu right"> 
 
      <a href="#" class="item">Test</a> 
 
     </div> 
 
    </div> 
 
    <div class="ui segment"> 
 
    <table class="ui celled table"> 
 
    <thead> 
 
    <tr><th>Header</th> 
 
    <th>Header</th> 
 
    <th>Header</th> 
 
    </tr></thead> 
 
    <tbody> 
 
    <tr> 
 
     <td> 
 
     <div class="ui ribbon label">First</div> 
 
     </td> 
 
     <td>Cell</td> 
 
     <td>Cell</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Cell</td> 
 
     <td>Cell</td> 
 
     <td>Cell</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Cell</td> 
 
     <td>Cell</td> 
 
     <td>Cell</td> 
 
    </tr> 
 
    </tbody> 
 
    <tfoot> 
 
    <tr><th colspan="3"> 
 
     <div class="ui right floated pagination menu"> 
 
     <a class="icon item"> 
 
      <i class="left chevron icon"></i> 
 
     </a> 
 
     <a class="item">1</a> 
 
     <a class="item">2</a> 
 
     <a class="item">3</a> 
 
     <a class="item">4</a> 
 
     <a class="icon item"> 
 
      <i class="right chevron icon"></i> 
 
     </a> 
 
     </div> 
 
    </th> 
 
    </tr></tfoot> 
 
</table> 
 
    </div> 
 
</div> 
 
    
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.4/semantic.min.js"></script> 
 
    
 
</body> 
 
</html>

источник

2015-10-19 kmm

Посмотрите на Examples section for Sidebar docs. У вас есть два варианта, я думаю:

сворачивают содержимое с помощью <div class="ui left sidebar inverted vertical menu visible scale down">
сделать дисплей на боковой панели над содержанием, используя overlay CSS класс: <div class="ui left sidebar inverted vertical menu visible overlay">

источник

2015-10-19 21:42:38 matagus

Это работает, но для справки - где это написано в документах? Я не могу найти его нигде. –

Вы можете сохранить все ваши другой код тот же, и просто измените способ инициализации боковой панели.

// Initialize the sidebar before it's used 
$('.ui.sidebar').sidebar({ 
    // Overlay will mean the sidebar sits on top of your content 
    transition: 'overlay' 
}); 

// Do the toggling 
$('.toggler').on('click', function() { 
    $('.ui.sidebar').sidebar('toggle'); 
});

источник

2015-10-19 22:27:50 J3Y

Это отлично работает при инициализации и первом переключении, но выявление боковой панели выглядит ужасно. какие-либо предложения? – the4tress

Остановить семантический интерфейс от переполнения содержимого с помощью боковой панели

ответ

Смежные вопросы