Am a newbie in webdev. Am trying to use semantic-ui to build a simple web portal.
I have an issue in using the sidebar component. I want the sidebar behaviour to be like this page https://adminlte.io/themes/AdminLTE/index2.html where the body content shrinks / expands when the sidebar is shown/collapsed.
But whatever settings / transition method i choose on the sidebar (push/scale) in semantic-ui , some part of the body moves out of the screen. I just want the content to shrink and expand without exceeding the viewport width.
Here is the jsfiddle of my code showing the issue :
https://jsfiddle.net/vinu_tlg/L5eqt3f4/
Can anyone let me know how i can achieve this behaviour in semantic-ui.
There is a somewhat similar question asked earlier but i don’t see any answer on how to achieve it.
Appreciate any pointers. Thanks in advance.
Add this style
.sidebar.visible + .pusher {
width: calc(100% - 260px);
}
body.pushable {
background-color: white !important;
}
Updated fiddle