Angular 7 - Changing sidebar and element z-index

Question

I want to change the z-index of sidebar in my Angular 7 web app. The sidebar is created with ng-sidebar and its default z-index is 9999999, as seen in the picture below. On my sidebar I have jqwidget dropdownboxes which have a default z-index 2000. After reading multiple SO and forums posts with similar problems as well as trying with Inspect Element , the problem seems to be that when I click on the dropdownbox, the values are hidden behind the sidebar because of the lower z-index. I can't seem to override the z-index of the sidebar or the dropdownbox element in order to make it be seen.

How can I fix this?

Answer 1

You can override css in css file related with your component.

.ng-sidebar {
     z-index: 1
}

If this doesn't work, increase specificity of your selector.