1

I need to use a template of an admin panel, so i've logged into that site: http://bootstraptaste.com/theme/niceadmin/index.html

I've launched "developer tools" in my Google Chrome, and set the container width css property to "150%" instead of "100%". The container width was expanded as expected, but for some reason, when scrolling to the right all of the container text overrides the side bar!

I've been trying for hours and still can't figure out why this is happening, and what to do so the text won't override the left panel.

Any help ?

ohadinho
  • 6,894
  • 16
  • 71
  • 124

1 Answers1

4

Add a high z-index to #sidebar

#sidebar {
  width: 180px;
  height: 100%;
  position: fixed;
  background: #394a59;
  z-index: 99; <----------------
}

A thread on z-index

Community
  • 1
  • 1
elad.chen
  • 2,375
  • 5
  • 25
  • 37
  • Shalom Elad, can you explain further? – ohadinho Aug 24 '15 at 12:20
  • 1
    Shalom Shalom. Check the link in my post for a detailed explanation on z-index. – elad.chen Aug 24 '15 at 12:23
  • 2
    The z-index property specifies the stack order of an element. An element with greater stack order is always in front of an element with a lower stack order. – Aminesrine Aug 24 '15 at 12:29
  • @elad.chen I know that is another question: but if I also want the "Home/Dashboard" to stand still when I scroll right (So the user can click it immediately even if he scrolls right).. is there an easy way of doing this ? – ohadinho Aug 25 '15 at 04:02
  • @elad.chen can you refer to my last question please? – ohadinho Aug 25 '15 at 11:23
  • Hi, Just to make sure, you want the breadcrumbs section ( The with bar with Home / Dashboard ) to remain visible when scrolling occurs ? – elad.chen Aug 25 '15 at 12:53