New sidebar tab, is not scrolling vertically

[Diogo Ramos]

Hello Everyone, 

I want to accomplish a very simple request, on the record page, create a custom sidebar tab that will display a list of quick links. 

I have no problem creating the tab / adding the component to it, but it seems that the tab does not scroll vertically when the content is bigger then the available space. 

(This page is created from APP Engine studio and it's NOT using the contextual sidebar, but instead the tab component).

I have tried multiple ways to try and make it work. From having a viewport to just a container + the component, but did not had any success. The only way I was able to make a scroll appear was by using the component Resizable Pane with Top and Bottom and a divider at 99%, but this is really a hacky way to achieve something that should just work by default ? 

Using the viewport, I can see on UI Builder that the subPage does have a scroll showing up by default, but when it loads on the tab it does not.

If someone has a good idea I would appreciate the help 🙂 

[Dr Atul G- LNG]

Hi @Diogo Ramos 

Very wired behaviour. May be try to resize the browser window and see, else log a case to Now Support. 

[Diogo Ramos · Accepted solution]

Hello all, 

I was able to make it work, after inspecting some of the oob widgets for similar functionality. For that I used the service operations workspace / recod snc page  / contextual side bar / utilities viewport / utilities subpage. 

Then I investigated the CSS configuration for this page, and I applied the same setup on my page. 

So this is what I did: 

1 - Create your new tab 
2 - Create a container (flexbox)
3 - Go to the container advanced CSS properties 
3.1 On the External Layer add : 

* {

    height: 1calc(100vh - 330px);

    max-height: calc(100vh - 330px);

    min-height: 100%;

    overflow: auto;

    width: 100%;

}

3.2 On the internal Layer add: 

* {

    display: flex;

    justify-content: left;

    padding-left: var(--now-scalable-space--lg);

    padding: var(--now-scalable-space--lg);

    padding-top: var(--now-scalable-space--lg);

    padding-right: var(--now-scalable-space--lg);

    padding-bottom: var(--now-scalable-space--lg);

}

4 - Add your link set widget or any other (no need to add additional css)
5 - Save and test 

You can of course modify the CSS as your would like, this is just an example I used to get it working as I wanted for now. Below is the image with the scroll now.

I've tested this with and without viewport and it seems to be ok for both, for the overview above I did not use a viewport but you could follow it the same way.

Components :