refactor(dashboard): measure scrollbar width directly from element#2069
refactor(dashboard): measure scrollbar width directly from element#2069chintankavathia wants to merge 18 commits into
Conversation
…kerConfig BREAKING CHANGE: `CriterionDefinition.datepickerConfig` type narrowed The type of `datepickerConfig` in `CriterionDefinition` (filtered-search) changed from `DatepickerInputConfig` to `Omit<DatepickerInputConfig, 'enableDateRange' | 'enableTwoMonthDateRange'>`. The properties `enableDateRange` and `enableTwoMonthDateRange ` are no longer accepted in `datepickerConfig` when used with filtered-search criteria, as they had no effect in that context. Migration: Remove any `enableDateRange` and `enableTwoMonthDateRange` properties from your `datepickerConfig` objects passed to `CriterionDefinition`.
Adding a set of utilities that allows customers to create selects with custom backed value selection, for instance using `si-tree-view`. A very simple version of it can look like this: ```ts @component({ selector: 'app-tree-select', imports: [SiSelectComboboxComponent, SiSelectDropdownDirective, SiTreeViewComponent], template: ` <si-select-combobox> @if (select.value(); as val) { {{ val }} } @else { <span class="text-secondary">Select a location...</span> } </si-select-combobox> <ng-template si-select-dropdown> <si-tree-view class="d-block" ariaLabel="Locations" [items]="items()" [enableSelection]="true" [singleSelectMode]="true" [isVirtualized]="false" (treeItemClicked)="selectItem($event)" /> </ng-template> `, changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [ { directive: SiCustomSelectDirective, inputs: ['disabled', 'readonly', 'value'], outputs: ['valueChange'] } ] }) export class TreeSelectComponent { protected readonly select = inject(SiCustomSelectDirective); /** The tree items to display. */ readonly items = input<TreeItem[]>([]); selectItem(item: TreeItem): void { if (item.label) { this.select.updateValue(item.label as string); this.select.close(); } } } ``` The goal is to empower applications to build selects with whatever content they need while we take care of accesibility and proper appereance. Closes #1840
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request deprecates the ScrollbarHelper service and updates SiDashboardComponent to calculate scrollbar width directly using DOM properties. Feedback suggests refining the calculation to account for borders, ensuring SSR safety by guarding DOM access with isPlatformBrowser, and optimizing performance in the dashboard component by utilizing existing dimension data to avoid redundant DOM reads.
Replace ScrollbarHelper service with direct offsetWidth - clientWidth measurement on the scrollable element, which is more accurate and SSR-safe. DEPRECATED: `ScrollbarHelper` service is deprecated and will be removed in v51. Use `element.offsetWidth - element.clientWidth` on the scrollable element instead.
chintankavathia
force-pushed
the
refactor/dashboard/scroll-width
branch
from
4e0397e to
70ec30a
Compare
| let padding = this.document.body.offsetWidth >= BOOTSTRAP_BREAKPOINTS.mdMinimum ? 32 : 16; | ||
| if ( | ||
| dashboardDimensions && | ||
| dashboardFrameDimensions && | ||
| dashboardDimensions.height > dashboardFrameDimensions.height | ||
| ) { | ||
| padding = padding - this.scrollbarHelper.width; | ||
| const { offsetWidth, clientWidth } = this.dashboardFrame().nativeElement; | ||
| padding = padding - (offsetWidth - clientWidth); |
There was a problem hiding this comment.
I think this whole padding calculation stuff can be dropped completely. Instead use the normal padding helper classes and when the scrollbar is visible, trigger a class that has scrollbar-gutter: stable;. What scheduler uses these days
There was a problem hiding this comment.
May be I don't get it but isn't here it is opposite so we need to decrease padding when scrollbar is present but scrollbar-gutter: stable; ensures to have extra space always even when there is no scrollbar. padding value needs to be decreased upto width of scrollbar so that it vertically aligns with button above which differs browsers to browsers.
There was a problem hiding this comment.
Ah...didn't really read the code. I have a similar use case with a header and a scrollable area. What I do is to add the scrollbar-gutter to the header so it is aligned with the scroll area
There was a problem hiding this comment.
That would work in terms of alignement but will add extra space when we have scrollbar:
with proposed change
- with scrollbar
-without scrollbar
existing
- with scrollbar
- without scrollbar
@panch1739 WDYT
5 participants
Replace ScrollbarHelper service with direct offsetWidth - clientWidth measurement on the scrollable element, which is more accurate and SSR-safe.
DEPRECATED:
ScrollbarHelperservice is deprecated and will be removed in v51. Useelement.offsetWidth - element.clientWidthon the scrollable element instead.Documentation.
Examples.
Dashboards Demo.
Playwright report.
Coverage Reports: