0

I'm working on a webapp which has a dashboard with a sidebar and a body. Sidebar is full height, scrollable sidebar. Following is the css class for the sidebar.

@media (min-width: 991px) {
    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        /*z-index: 1000;*/
        display: block;
        background-color: #333333;
        color: #ffffff;
    }
}

On this sidebar, there is a button which opens a bootstrap modal with some information. The issue which I'm having right now is that the modal is opening on the background I can click on it or close it. (As you can see in the attachment_1)

attachment_1

To overcome this issue, what I did was changing position of the sidebar from fixed to absolute from the sidebar style class.

@media (min-width: 991px) {
    .sidebar {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        /*z-index: 1000;*/
        display: block;
        background-color: #333333;
        color: #ffffff;
    }
}

But when I do that, even though the modal view is appearing as it should be (attachment_2), the alignment of the sidebar messes up as shown in the attachment_3

attachment_2

attachment_3

Can anyone please suggest me a way to overcome this issue with the requirements I have. If you can provide an example, I'd much appreciate that.

Thank you!

Kavindu N
  • 383
  • 1
  • 7
  • 23
  • Is the modal's z-index value being overridden by any other class? If not please try setting a high index value to it. – Sagar May 10 '17 at 10:23
  • @Sagar `z-index` value is not the issue. That's why I commented that out to show that `z-index` has nothing to do with this. – Kavindu N May 10 '17 at 10:27
  • @Sagar and I added a custom class to the modal and set the `z-index` of that as 1000. The result is still the same – Kavindu N May 10 '17 at 10:30
  • If maybe you could provide a link to your demo code like plunkr/codepen/jsfiddle it would be great. – Sagar May 10 '17 at 10:35

0 Answers0