2

I'm using Nebular for my Angular app and currently im trying to figure out how to overwrite theme settings for one component on one page only, having the component used on other places using the original settings.

Example: (nb-sidebar) This is used as the menu sidebar located to the left of the screen. But I have also placed one on the right side, used for a different purpose.

Both of them are currently inheriting the themes values. So i can go into themes.scss and re-size the component but of course it affect both sidebars. I only want to re-size the right hand sided one! I have tried to overwrite this in my own [component].scss with something like:

nb-sidebar,
nb-sidebar > .expanded {
  width: 23rem;
}
nb-sidebar,
nb-sidebar > .collapsed {
  width:0px;
}

And many other variations of above without success.

Other components such as nb-card etc there are no problems to change. There's also no problem to change other features such as background color on the sidebar. But the width... no.

Any suggestions? Regards

Albin Pettersson
  • 191
  • 2
  • 7

3 Answers3

2

I had the exact same problem and finally got it working by adding the following to the styles.css:

.right-sidebar div.main-container.main-container-fixed {
      width: 20vw !important;
}
//adjust the margin as well to keep the sidebar in the viewport
.right-sidebar {
     margin-left: 80vw !important;
 }
opp
  • 1,010
  • 10
  • 17
2

Based on the documentation here.

  1. Enable the custom properties on the themes.scss file

$nb-enable-css-custom-properties: true;

  1. Create a css class and access the sidebar theme variable sidebar-width

     .ticketViewSideBar {
   --sidebar-width:22rem;
 }

  2. Then use class on your html nbsidebar component

    <nb-sidebar class="ticketViewSideBar" right="true" > //some code here </nb-sidebar>
Arjohn21
  • 66
  • 5
1

Let's assume you have app component with following HTML:

<nb-layout>
  <nb-sidebar>Menu</nb-sidebar>
  ...
  <nb-sidebar class="right-sidebar">...</nb-sidebar>
</nb-layout>

Notice right-sidebar class on the second sidebar. Now you could target only second sidebar via nb-sidebar.right-sidebar selector and style it as you need, for example:

nb-sidebar.right-sidebar {
  width: 100px;
}
ArtemRomanovsky
  • 129
  • 4
  • Hi, Thanks for your reply. That does not work. I have manage to get the sidebar itself larger, but currently failing on the content.
    //width: 25rem ok //width: 16rem <- content
    @include nb-install-component() { #settings-sidebar { .expanded{ width: 25rem; } } } .whatever { width:25rem } or similar does not work, also tried to style the auto generated classes. Still overwritten by the nebular sidebar themes: sidebar-width: 16rem.     – Albin Pettersson Dec 18 '19 at 14:46