Semantic-ui: [Sidebar] Allow Sidebar to Start Visible

Created on 20 Feb 2014 · 9Comments · Source: Semantic-Org/Semantic-UI

Great library! It's nice to see a UI kit that isn't a direct knock-off of Bootstrap, you all have definitely made great advances.

The sidebar is an excellent widget, but I would like to propose a change: when the sidebar appears, page content should be scrollable vertically; in this way, the page content functions as a, "visible scrollbar".

When the content is scrolled, it would be really nice to have the menu position update as per scrollspy, but I am aware this may not always be possible (if navigation elements do not correspond to page content).

Enhancement

Source

andrewshawcare

👍2

Most helpful comment

I'm having the same problem with a fixed sidebar. I ended up adding these overrides to sidebar.overrides in a custom theme while waiting for official support for this. It works for my use case but may not be applicable in your specific scenarios.

.ui.left.sidebar ~ .fixed, .ui.left.sidebar ~ .pusher {
  -webkit-transition: -webkit-transform @duration @easing, padding @duration @easing;
  transition: -webkit-transform @duration @easing, padding @duration @easing;
  transition: transform @duration @easing, padding @duration @easing;
  transition: transform @duration @easing, -webkit-transform @duration @easing, padding @duration @easing;
}
.ui.visible.left.sidebar ~ .fixed, .ui.visible.left.sidebar ~ .pusher {
  padding-right: @width;
}
.ui.visible.thin.left.sidebar ~ .fixed, .ui.visible.thin.left.sidebar ~ .pusher {
  padding-right: @thinWidth;
}
.ui.visible.wide.left.sidebar ~ .fixed, .ui.visible.wide.left.sidebar ~ .pusher {
  padding-right: @wideWidth;
}
.ui.visible.very.wide.left.sidebar ~ .fixed, .ui.visible.very.wide.left.sidebar ~ .pusher {
  padding-right: @veryWideWidth;
}
.ui.visible.very.thin.left.sidebar ~ .fixed, .ui.visible.very.thin.left.sidebar ~ .pusher {
  padding-right: @veryThinWidth;
}

jgranstrom on 22 Mar 2016

👍8

All 9 comments

:+1: This is imho, a key feature for a sidebar...

varemenos on 16 Sep 2014

This is a simple feature in 1.0 just use visible sidebar
http://jsfiddle.net/8f11gjez/1/

jlukic on 4 Dec 2014

@jlukic That doesn't quite work. Add content (with or without a parent div.pusher) and the sidebar overlaps it. See http://jsfiddle.net/8f11gjez/12/ and http://jsfiddle.net/8f11gjez/13/

This appears to be because the .pusher's shift is dependent on JavaScript. In particular, examining the CSS shows that .ui.visible.left.sidebar ~ .pusher that the transition defaults to none, though examining the runtime state where .sidebar("show") was used, you can see the transition is set appropriately.

Luiji on 8 Jan 2015

@Luiji Yes, you are correct. It is not that simple, I was wrong.

ui sidebar was adjusted in 1.0 to support any size sidebar. The exact distance the page contents should be pushed is determined by the width of the sidebar after rendering. The translate rules for the animation are appended to <head> before translation based on the calculated width.

So the transform rules for pusher are not defined before show or hide are called.

I think the best way to resolve this is to add a simple class name variation for sidebar that allows for visibility on page load, that will have baked in rules the four default sizes, but not support custom sizes.

I will see if i can use ui visible sidebar for this new variation, a "sidebar can be visible on load". Although we might want to use a different class to distinguish a "visible on load sidebar" from a sidebar made visible through animation.

jlukic on 8 Jan 2015

Added in next

Requires using a specified size from sidebar

Labeled icon
http://jsfiddle.net/Lzpf6w1y/

Regular
http://jsfiddle.net/19barvpu/

jlukic on 8 Jan 2015

Hello,

If I use the same code as provided in your jsFiddle the pusher div as the same width than the body without substracting the sidebar width.
This issue is also available in your jsFiddle examples.
How can I have the right width of the pusher div if my sidebar is visibale on load ?

ghost on 10 Nov 2015

I have the exact same question as @gbourgneuf - if the visible class is set on the sidebar, (how) can I adjust the width of the pusher accordingly? As it is, the width of the sidebar is not taken into account and thus right-aligned content is pushed off of the screen as in e.g. http://jsfiddle.net/uh88ax0b/1/

frerich on 24 Dec 2015

👍3

Any update on this?

pscanlon1 on 11 Mar 2016

.ui.left.sidebar ~ .fixed, .ui.left.sidebar ~ .pusher {
  -webkit-transition: -webkit-transform @duration @easing, padding @duration @easing;
  transition: -webkit-transform @duration @easing, padding @duration @easing;
  transition: transform @duration @easing, padding @duration @easing;
  transition: transform @duration @easing, -webkit-transform @duration @easing, padding @duration @easing;
}
.ui.visible.left.sidebar ~ .fixed, .ui.visible.left.sidebar ~ .pusher {
  padding-right: @width;
}
.ui.visible.thin.left.sidebar ~ .fixed, .ui.visible.thin.left.sidebar ~ .pusher {
  padding-right: @thinWidth;
}
.ui.visible.wide.left.sidebar ~ .fixed, .ui.visible.wide.left.sidebar ~ .pusher {
  padding-right: @wideWidth;
}
.ui.visible.very.wide.left.sidebar ~ .fixed, .ui.visible.very.wide.left.sidebar ~ .pusher {
  padding-right: @veryWideWidth;
}
.ui.visible.very.thin.left.sidebar ~ .fixed, .ui.visible.very.thin.left.sidebar ~ .pusher {
  padding-right: @veryThinWidth;
}