Перемещаемый контент с видимой боковой панелью Semantic UI слишком широк.

При использовании видимой боковой панели Semantic UI содержимое в толкателе слишком широкое. Он имеет ширину окна браузера, а не ширину доступного пространства.

<div class="pushable">
    <div class="ui left vertical inverted visible sidebar menu">
        <a class="item" href="/">Item</a>
    </div> 
    <div class="pusher">                                                                                 
            My content 
        <table class="ui red table"><thead><th>1</th></thead>
            <tbody><td>Test</td></tbody>
        </table>
    </div>
</div>

См. jsfiddle здесь: http://jsfiddle.net/xh9p6tgb/1/


semantic-ui
person KingOfCoders    schedule 30.10.2015    source источник
comment
Я также хотел бы, чтобы семантический пользовательский интерфейс не выталкивал вещи за пределы окна. Это очень неожиданно. Я бы хотел, чтобы Semantic UI придерживался руководства по дизайну материалов, которое требует, чтобы контент масштабировался в соответствии с доступным пространством.   -  person morgler    schedule 19.05.2017

Ответы (1)


arrow_upward
9
arrow_downward

Если вы хотите, чтобы элемент похожий на боковую панель всегда был виден, попробуйте использовать просто Семантическое меню пользовательского интерфейса вместо боковой панели. Встроенных классов должно быть достаточно, чтобы вы могли использовать его в качестве бокового меню и соответствующим образом масштабировать свой контент.

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

Вы можете изменить типы анимации боковой панели во время инициализации, используя опцию анимации, например:

// Add javascript here
$(document).ready(function() {
    $(".ui.sidebar").sidebar({
        transition: 'overlay'
    });
});

Однако, если вы хотите, чтобы боковая панель была анимированной, а также имела функцию закрепления, вам, скорее всего, придется реализовать это самостоятельно. Возможно, что-то вроде добавления класса pinned на боковую панель или просто использование класса visible, чтобы определить, должен ли толкатель уменьшаться с помощью CSS:

.ui.sidebar.visible ~ .pusher {
    width: calc(100% - 260px);
}

К сожалению, анимация выглядит немного странно, но ее можно использовать.

Вы можете увидеть это здесь http://jsfiddle.net/rkkmLtzn/

person J3Y    schedule 30.10.2015