From 6f066e90ef04b424482f8137e890a65dac3ecbb5 Mon Sep 17 00:00:00 2001 From: Hale Rankin Date: Fri, 17 Apr 2020 22:20:27 -0700 Subject: [PATCH] Notebook UI - Fixes navigation offset (#10067) * Addresses bug: 10062. Replaced scrollTop with getBoundingClientRect.top minus the combined height of the top tabs and action bar. * Setting initial value of chrome offset, and checking for existence of both tool bars before getting their heights. --- .../contrib/notebook/browser/notebook.component.ts | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/src/sql/workbench/contrib/notebook/browser/notebook.component.ts b/src/sql/workbench/contrib/notebook/browser/notebook.component.ts index 1932f38486..52bdc64987 100644 --- a/src/sql/workbench/contrib/notebook/browser/notebook.component.ts +++ b/src/sql/workbench/contrib/notebook/browser/notebook.component.ts @@ -664,10 +664,17 @@ export class NotebookComponent extends AngularDisposable implements OnInit, OnDe navigateToSection(id: string): void { id = id.toLowerCase(); + let chromeHeight: number = 0; + let elBody: HTMLElement = document.body; + let tabBar = elBody.querySelector('.title.tabs') as HTMLElement; + let actionBar = elBody.querySelector('.editor-toolbar.actionbar-container') as HTMLElement; let section = find(this.getSectionElements(), s => s.relativeUri && s.relativeUri.toLowerCase() === id); if (section) { // Scroll this section to the top of the header instead of just bringing header into view. - let scrollTop = section.headerEl.offsetTop; + if (tabBar && actionBar) { + chromeHeight = tabBar.scrollHeight + actionBar.scrollHeight; + } + let scrollTop: number = section.headerEl.getBoundingClientRect().top - (chromeHeight + 10); (this.container.nativeElement).scrollTo({ top: scrollTop, behavior: 'smooth'