CAP: vertical tabs list scrolls with panel-container

[whernebrink]

Describe the bug
When having vertical-tabs (which recently was added support for) in the CAP dialog, the tabs list scrolls together with the panel-container content.

To Reproduce

Steps to reproduce the behavior:

1. https://stackblitz.com/edit/ids-quick-start-1030-ochbsp (I was unable to update the deps to 10.3 so it is on 9.5, but the issue is on latest enterprise-ng when running locally too).
2. Click on button to trigger CAP dialog
3. Scroll the content (if needed make your browser window small so the content don't fit)
4. See the tabs list scrolling just like the panel container content does

Expected behavior
The tabs-list should have independent scrolling from the panel-container one.

Version
enterprise-ng 10.3.0

Screenshots

Platform

• Infor Application/Team Name: Infor M3
• OS Version: Big Sur

[tjamesallen15]

Hello @tmcconechy and @ericangeles ,

During my investigation yesterday, I happen to check that the div container inside has already a vertical scroll. Then I checked if it is implemented in angular, and was already there too.

Here is the video. I just happen to add two more paragraphs in the container to make it more visible. (Added in my localhost)
Angular Video: https://drive.google.com/file/d/1GXshe6Op9Ec1pG1xd4qcQvy1djrzUIqD/view?usp=sharing

[tmcconechy]

Yes! @tjamesallen15 this looks like the right behavior. But also make sure that if you have a lot of items on the left side that that side can scroll too independently

[janahintal]

Hello, notice that in first load, the body scrolls independently but the scroll bar is not moving in the left side. When I click inside the tab and scroll, the scroll behavior changes and the body can't be scrolled again independently. As for the tabs, it now does have independent scrolling but not in main body.

IDS.Enterprise.-.Google.Chrome.2021-10-21.15-22-50.mp4

[tmcconechy]

Yes i see that. I think maybe there is an extra element with css overflow on it. I can reproduce it on https://main-enterprise.demo.design.infor.com/components/contextualactionpanel/example-cap-tabs-vertical-scroll.html by placing the mouse around the divider and scrolling then you see both move.

Take another look? @tjamesallen15 ?

[tmcconechy]

@tjamesallen15 do you have another fix for this?

[tjamesallen15]

@tjamesallen15 do you have another fix for this?

will check on this one.

[tjamesallen15]

@janahintal i'll talk to you offline about this for further information

[janahintal]

QA Passed. Now working as expected in https://main-enterprise.demo.design.infor.com/components/contextualactionpanel/example-cap-tabs-vertical-scroll.html. Thanks! 👍