Skip to content

fix(unity-bootstrap-theme): prevent tab vertical scroll #1680

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
scott-williams-az wants to merge 3 commits into
base: dev
Choose a base branch
from
+19 −12
Open

fix(unity-bootstrap-theme): prevent tab vertical scroll #1680

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
5c9799b
fix(unity-bootstrap-theme): prevent tab vertical scroll
scott-williams-az Apr 9, 2026
dc792d3
fix(unity-bootstrap-theme): tab allow scroll all viewports
scott-williams-az Apr 10, 2026
34598f1
chore(unity-bootstrap-theme): lint error
scott-williams-az Apr 10, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 18 additions & 11 deletions packages/unity-bootstrap-theme/src/js/tabbed-panels.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,21 @@ function initTabbedPanels() {
e.target.focus();
}
};
const scrollIntoViewHorizontally = tab => {
const container = tab.parentElement;
const tabOffsetRight = tab.offsetLeft + tab.offsetWidth;
const containerScrollRight = container.scrollLeft + container.offsetWidth;

// is tab behind (left)
if (container.scrollLeft > tab.offsetLeft) {
container.scrollLeft = tab.offsetLeft;
Copy link
Copy Markdown
Contributor

@juanmitriatti juanmitriatti Apr 14, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi @scott-williams-az
Just asking, it sets container.scrollLeft directly, causing an instant jump. For a better UX , should not we consider using container.scrollTo({ left: ..., behavior: 'smooth' }) (in case that's possible here).

Copy link
Copy Markdown
Contributor Author

@scott-williams-az scott-williams-az Apr 14, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@juanmitriatti Your changes makes sense but I am wondering why it is an instant jump for you and I am seeing smooth already.

Copy link
Copy Markdown
Contributor

@juanmitriatti juanmitriatti Apr 14, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good catch, the reason it looks smooth on your end is because .nav-tabs already has scroll-behavior: smooth in _tabbed-panels.scss (line 28). That CSS property makes any programmatic scrollLeft assignment animate automatically. My suggestion for scrollTo({ behavior: 'smooth' }) would just make the intent explicit in the JS rather than relying on the CSS implicitly, but since the CSS is already handling it, this is fine as-is.

}

// is tab ahead (right)
if (containerScrollRight < tabOffsetRight) {
container.scrollLeft += tabOffsetRight - containerScrollRight;
}
};

document
.querySelectorAll(DOM_ELEMENT_UDS_TABBED_PANELS)
Expand Down Expand Up @@ -99,31 +114,25 @@ function initTabbedPanels() {
? CSS_DISPLAY_NONE
: CSS_DISPLAY_BLOCK;
});
// });

// handle focus event for tabs titles
navItems.forEach(tabTitle => {
tabTitle.addEventListener(EVENT_FOCUS, function (e) {
tabTitle.scrollIntoView();
scrollIntoViewHorizontally(tabTitle);
});
});

// click of the next button
nextButton.addEventListener(EVENT_CLICK, function (e) {
if (window.innerWidth > LG_BREAKPOINT) {
slideNav(this, e, -1);
}
slideNav(this, e, -1);
});

// click of the prev button
prevButton.addEventListener(EVENT_CLICK, function (e) {
if (window.innerWidth > LG_BREAKPOINT) {
slideNav(this, e, 1);
}
slideNav(this, e, 1);
});

// hide prev button on load

prevButton.style.display = CSS_DISPLAY_NONE;

// width of all tabs
Expand All @@ -140,6 +149,4 @@ function initTabbedPanels() {

EventHandler.on(window, "load.uds.tabs", initTabbedPanels);

// window.addEventListener("load.uds.tabs", initTabs, true);

export { initTabbedPanels };
2 changes: 1 addition & 1 deletion packages/unity-react-core/src/components/TabbedPanels/TabbedPanels.stories.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ export default {
const Template = () => {
return (
<MemoryRouter>
<div className="row no-gutters">
<div className="row no-gutters" style={{ padding: "10rem 0rem" }}>
<div className="col uds-full-width">
<TabbedPanels>
<Tab id="home" title="Home long tab">
Expand Down