0

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.

exp8
  • 25
  • 7

1 Answers1

0

Add this style

.sidebar.visible + .pusher {
  width: calc(100% - 260px);
}
body.pushable {
   background-color: white !important;
}

Updated fiddle

Nandita Sharma
  • 13,287
  • 2
  • 22
  • 35
  • Thanks. I understand the first part of the code but could you pl. explain the second part where you are setting bg-color to white ? What's it significance ? Also i see the transition is very abrupt. Is there any way i can smoothen things out? Much appreciate your help. – exp8 Jun 15 '18 at 10:47
  • I added that white color because else grey background was seen behind the main content when it comes back to its original position. You can try removing that style, you will see. And as for the transition, i tried something, but didnt work, i will try again and let you know :) – Nandita Sharma Jun 15 '18 at 10:52
  • @exp8 Try adding this .pushable>.pusher { transition: all 1s ease; } – Nandita Sharma Jun 15 '18 at 11:37