Search code examples
javascriptcsssemantic-ui

Semantic UI Bottom Sidebar Increase Size

Is there any way to increase the size (height) of the bottom version of the Semantic UI Sidebar?

If you add a wide class to the div element, it cuts off the bar. "wide" is only used for vertical sidebars, not for horizontal ones. "wide" only affects the width of the sidebar, not its height.

Here is my fiddle of an attempt at a solution.

HTML

<div class="ui bottom sidebar deep vertical inverted menu" id="bottom-side">
    <div class="header item">Bottom Sidebar menu</div>
    <a class=item>Foo</a>
    <a class=item>Foo</a>
    <a class=item>Foo</a>
</div>

JS

$(document).ready(function () {
   $('#bottom-side').sidebar('toggle');
});

CSS

.ui.deep.bottom.sidebar {
    height: 400px;
}

.ui.deep.active.bottom.sidebar {
    height: 400px;
}
Solution

  • The semantic UI CSS is using !important when setting the height, so you need to use it as well to override it. It looks like you also need a negative top margin equal to the height. Updated fiddle: https://jsfiddle.net/m4th0hb3/1/

    .ui.deep.active.bottom.sidebar {
    height: 400px !important;
    margin-top: -400px !important;
}