Skip to content

Fix toolbar dropdown positioning to prevent viewport clipping #16412

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

Jump to bottom
Closed
wants to merge 3 commits into from
Closed

Fix toolbar dropdown positioning to prevent viewport clipping #16412

wants to merge 3 commits into from

Conversation

Copy link
Contributor

Copilot AI commented Nov 3, 2025 •
edited
Loading

Toolbar dropdowns (Column Hiding, Column Pinning, Exporter) were being clipped when the grid wasn't fully visible in the viewport due to using ConnectedPositioningStrategy.

Changes

  • grid-toolbar.base.ts: Replaced ConnectedPositioningStrategy with AutoPositionStrategy for default overlay settings

    • AutoPositionStrategy automatically repositions dropdowns to stay within viewport bounds via flipping and pushing
    • Matches positioning strategy used elsewhere in the codebase (cell editors, pivot grid menus, excel-style filters)

  • grid-toolbar.spec.ts: Added test verifying AutoPositionStrategy is used by default

Users can still override positioning via the overlaySettings input if custom behavior is needed.

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

  • accounts.google.com
    • Triggering command: /home/REDACTED/.cache/puppeteer/chrome/linux-136.0.7103.94/chrome-linux64/chrome --type=utility --utility-sub-type=network.mojom.NetworkService --lang=en-US --service-sandbox-type=network --no-sandbox --disable-dev-shm-usage --use-angle=swiftshader-webgl --crashpad-handler-pid=3759 --enable-crash-reporter=, --noerrdialogs --user-data-dir=/tmp/karma-96420898 --change-stack-guard-on-fork=enable --shared-files=network_parent_dirs_pipe:100,v8_context_snapshot_data:101 --field-trial-handle=3,i,16453752260759404224,16679209088666746775,262144 --disable-features=PaintHolding --variations-seed-version (dns block)
    • Triggering command: /home/REDACTED/.cache/puppeteer/chrome/linux-136.0.7103.94/chrome-linux64/chrome --type=utility --utility-sub-type=network.mojom.NetworkService --lang=en-US --service-sandbox-type=network --no-sandbox --disable-dev-shm-usage --use-angle=swiftshader-webgl --crashpad-handler-pid=3760 --enable-crash-reporter=, --noerrdialogs --user-data-dir=/tmp/karma-3718842 --change-stack-guard-on-fork=enable --shared-files=network_parent_dirs_pipe:100,v8_context_snapshot_data:101 --field-trial-handle=3,i,10378793158173872682,17696291565594757572,262144 --disable-features=PaintHolding --variations-seed-version (dns block)
    • Triggering command: /home/REDACTED/.cache/puppeteer/chrome/linux-136.0.7103.94/chrome-linux64/chrome --user-data-dir=/tmp/karma-96420898 --enable-automation --no-default-browser-check --no-first-run --disable-default-apps --disable-popup-blocking --disable-translate --disable-REDACTED-timer-throttling --disable-renderer-REDACTEDing --disable-device-discovery-notifications --no-sandbox --disable-gpu --window-size=820,800 --js-flags=--expose-gc --headless --disable-gpu --disable-dev-shm-usage --remote-debugging-port=9222 --noerrdialogs --ozone-platform=headless --ozone-override-screen-size=800,600 --use-angle=swiftshader-webgl http://localhost:9876/?id=96420898 (dns block)
  • android.clients.google.com
    • Triggering command: /home/REDACTED/.cache/puppeteer/chrome/linux-136.0.7103.94/chrome-linux64/chrome --type=utility --utility-sub-type=network.mojom.NetworkService --lang=en-US --service-sandbox-type=network --no-sandbox --disable-dev-shm-usage --use-angle=swiftshader-webgl --crashpad-handler-pid=4207 --enable-crash-reporter=, --noerrdialogs --user-data-dir=/tmp/karma-43750514 --change-stack-guard-on-fork=enable --shared-files=network_parent_dirs_pipe:100,v8_context_snapshot_data:101 --field-trial-handle=3,i,1661436699011700004,12674202509836043034,262144 --disable-features=PaintHolding --variations-seed-version (dns block)
    • Triggering command: /home/REDACTED/.cache/puppeteer/chrome/linux-136.0.7103.94/chrome-linux64/chrome --user-data-dir=/tmp/karma-43750514 --enable-automation --no-default-browser-check --no-first-run --disable-default-apps --disable-popup-blocking --disable-translate --disable-REDACTED-timer-throttling --disable-renderer-REDACTEDing --disable-device-discovery-notifications --no-sandbox --disable-gpu --window-size=820,800 --js-flags=--expose-gc --headless --disable-gpu --disable-dev-shm-usage --remote-debugging-port=9222 --noerrdialogs --ozone-platform=headless --ozone-override-screen-size=800,600 --use-angle=swiftshader-webgl http://localhost:9876/?id=43750514 (dns block)
    • Triggering command: /home/REDACTED/.cache/puppeteer/chrome/linux-136.0.7103.94/chrome-linux64/chrome --type=utility --utility-sub-type=network.mojom.NetworkService --lang=en-US --service-sandbox-type=network --no-sandbox --disable-dev-shm-usage --use-angle=swiftshader-webgl --crashpad-handler-pid=4199 --enable-crash-reporter=, --noerrdialogs --user-data-dir=/tmp/karma-59878123 --change-stack-guard-on-fork=enable --shared-files=network_parent_dirs_pipe:100,v8_context_snapshot_data:101 --field-trial-handle=3,i,18353948885078788340,9835682464935558043,262144 --disable-features=PaintHolding --variations-seed-version (dns block)
  • clients2.google.com
    • Triggering command: /home/REDACTED/.cache/puppeteer/chrome/linux-136.0.7103.94/chrome-linux64/chrome --type=utility --utility-sub-type=network.mojom.NetworkService --lang=en-US --service-sandbox-type=network --no-sandbox --disable-dev-shm-usage --use-angle=swiftshader-webgl --crashpad-handler-pid=3758 --enable-crash-reporter=, --noerrdialogs --user-data-dir=/tmp/karma-81097769 --change-stack-guard-on-fork=enable --shared-files=network_parent_dirs_pipe:100,v8_context_snapshot_data:101 --field-trial-handle=3,i,7952434291289789221,1915575341082145500,262144 --disable-features=PaintHolding --variations-seed-version (dns block)
    • Triggering command: /home/REDACTED/.cache/puppeteer/chrome/linux-136.0.7103.94/chrome-linux64/chrome --type=utility --utility-sub-type=network.mojom.NetworkService --lang=en-US --service-sandbox-type=network --no-sandbox --disable-dev-shm-usage --use-angle=swiftshader-webgl --crashpad-handler-pid=3759 --enable-crash-reporter=, --noerrdialogs --user-data-dir=/tmp/karma-96420898 --change-stack-guard-on-fork=enable --shared-files=network_parent_dirs_pipe:100,v8_context_snapshot_data:101 --field-trial-handle=3,i,16453752260759404224,16679209088666746775,262144 --disable-features=PaintHolding --variations-seed-version (dns block)
    • Triggering command: /home/REDACTED/.cache/puppeteer/chrome/linux-136.0.7103.94/chrome-linux64/chrome --user-data-dir=/tmp/karma-81097769 --enable-automation --no-default-browser-check --no-first-run --disable-default-apps --disable-popup-blocking --disable-translate --disable-REDACTED-timer-throttling --disable-renderer-REDACTEDing --disable-device-discovery-notifications --no-sandbox --disable-gpu --window-size=820,800 --js-flags=--expose-gc --headless --disable-gpu --disable-dev-shm-usage --remote-debugging-port=9222 --noerrdialogs --ozone-platform=headless --ozone-override-screen-size=800,600 --use-angle=swiftshader-webgl http://localhost:9876/?id=81097769 (dns block)
  • content-autofill.googleapis.com
    • Triggering command: /home/REDACTED/.cache/puppeteer/chrome/linux-136.0.7103.94/chrome-linux64/chrome --type=utility --utility-sub-type=network.mojom.NetworkService --lang=en-US --service-sandbox-type=network --no-sandbox --disable-dev-shm-usage --use-angle=swiftshader-webgl --crashpad-handler-pid=4199 --enable-crash-reporter=, --noerrdialogs --user-data-dir=/tmp/karma-59878123 --change-stack-guard-on-fork=enable --shared-files=network_parent_dirs_pipe:100,v8_context_snapshot_data:101 --field-trial-handle=3,i,18353948885078788340,9835682464935558043,262144 --disable-features=PaintHolding --variations-seed-version (dns block)
    • Triggering command: /home/REDACTED/.cache/puppeteer/chrome/linux-136.0.7103.94/chrome-linux64/chrome --user-data-dir=/tmp/karma-29397644 --enable-automation --no-default-browser-check --no-first-run --disable-default-apps --disable-popup-blocking --disable-translate --disable-REDACTED-timer-throttling --disable-renderer-REDACTEDing --disable-device-discovery-notifications --no-sandbox --disable-gpu --window-size=820,800 --js-flags=--expose-gc --headless --disable-gpu --disable-dev-shm-usage --remote-debugging-port=9222 --noerrdialogs --ozone-platform=headless --ozone-override-screen-size=800,600 --use-angle=swiftshader-webgl http://localhost:9876/?id=29397644 (dns block)
    • Triggering command: /home/REDACTED/.cache/puppeteer/chrome/linux-136.0.7103.94/chrome-linux64/chrome --type=utility --utility-sub-type=network.mojom.NetworkService --lang=en-US --service-sandbox-type=network --no-sandbox --disable-dev-shm-usage --use-angle=swiftshader-webgl --crashpad-handler-pid=4215 --enable-crash-reporter=, --noerrdialogs --user-data-dir=/tmp/karma-29397644 --change-stack-guard-on-fork=enable --shared-files=network_parent_dirs_pipe:100,v8_context_snapshot_data:101 --field-trial-handle=3,i,17035883486641850509,15714521236685370443,262144 --disable-features=PaintHolding --variations-seed-version (dns block)
  • randomuser.me
    • Triggering command: /home/REDACTED/.cache/puppeteer/chrome/linux-136.0.7103.94/chrome-linux64/chrome --type=utility --utility-sub-type=network.mojom.NetworkService --lang=en-US --service-sandbox-type=network --no-sandbox --disable-dev-shm-usage --use-angle=swiftshader-webgl --crashpad-handler-pid=4215 --enable-crash-reporter=, --noerrdialogs --user-data-dir=/tmp/karma-29397644 --change-stack-guard-on-fork=enable --shared-files=network_parent_dirs_pipe:100,v8_context_snapshot_data:101 --field-trial-handle=3,i,17035883486641850509,15714521236685370443,262144 --disable-features=PaintHolding --variations-seed-version (dns block)
    • Triggering command: /home/REDACTED/.cache/puppeteer/chrome/linux-136.0.7103.94/chrome-linux64/chrome --user-data-dir=/tmp/karma-29397644 --enable-automation --no-default-browser-check --no-first-run --disable-default-apps --disable-popup-blocking --disable-translate --disable-REDACTED-timer-throttling --disable-renderer-REDACTEDing --disable-device-discovery-notifications --no-sandbox --disable-gpu --window-size=820,800 --js-flags=--expose-gc --headless --disable-gpu --disable-dev-shm-usage --remote-debugging-port=9222 --noerrdialogs --ozone-platform=headless --ozone-override-screen-size=800,600 --use-angle=swiftshader-webgl http://localhost:9876/?id=29397644 (dns block)
  • redirector.gvt1.com
    • Triggering command: /home/REDACTED/.cache/puppeteer/chrome/linux-136.0.7103.94/chrome-linux64/chrome --type=utility --utility-sub-type=network.mojom.NetworkService --lang=en-US --service-sandbox-type=network --no-sandbox --disable-dev-shm-usage --use-angle=swiftshader-webgl --crashpad-handler-pid=3758 --enable-crash-reporter=, --noerrdialogs --user-data-dir=/tmp/karma-81097769 --change-stack-guard-on-fork=enable --shared-files=network_parent_dirs_pipe:100,v8_context_snapshot_data:101 --field-trial-handle=3,i,7952434291289789221,1915575341082145500,262144 --disable-features=PaintHolding --variations-seed-version (dns block)
    • Triggering command: /home/REDACTED/.cache/puppeteer/chrome/linux-136.0.7103.94/chrome-linux64/chrome --type=utility --utility-sub-type=network.mojom.NetworkService --lang=en-US --service-sandbox-type=network --no-sandbox --disable-dev-shm-usage --use-angle=swiftshader-webgl --crashpad-handler-pid=3759 --enable-crash-reporter=, --noerrdialogs --user-data-dir=/tmp/karma-96420898 --change-stack-guard-on-fork=enable --shared-files=network_parent_dirs_pipe:100,v8_context_snapshot_data:101 --field-trial-handle=3,i,16453752260759404224,16679209088666746775,262144 --disable-features=PaintHolding --variations-seed-version (dns block)
    • Triggering command: /home/REDACTED/.cache/puppeteer/chrome/linux-136.0.7103.94/chrome-linux64/chrome --type=utility --utility-sub-type=network.mojom.NetworkService --lang=en-US --service-sandbox-type=network --no-sandbox --disable-dev-shm-usage --use-angle=swiftshader-webgl --crashpad-handler-pid=3760 --enable-crash-reporter=, --noerrdialogs --user-data-dir=/tmp/karma-3718842 --change-stack-guard-on-fork=enable --shared-files=network_parent_dirs_pipe:100,v8_context_snapshot_data:101 --field-trial-handle=3,i,10378793158173872682,17696291565594757572,262144 --disable-features=PaintHolding --variations-seed-version (dns block)
  • safebrowsing.googleapis.com
    • Triggering command: /home/REDACTED/.cache/puppeteer/chrome/linux-136.0.7103.94/chrome-linux64/chrome --type=utility --utility-sub-type=network.mojom.NetworkService --lang=en-US --service-sandbox-type=network --no-sandbox --disable-dev-shm-usage --use-angle=swiftshader-webgl --crashpad-handler-pid=4199 --enable-crash-reporter=, --noerrdialogs --user-data-dir=/tmp/karma-59878123 --change-stack-guard-on-fork=enable --shared-files=network_parent_dirs_pipe:100,v8_context_snapshot_data:101 --field-trial-handle=3,i,18353948885078788340,9835682464935558043,262144 --disable-features=PaintHolding --variations-seed-version (dns block)
    • Triggering command: /home/REDACTED/.cache/puppeteer/chrome/linux-136.0.7103.94/chrome-linux64/chrome --user-data-dir=/tmp/karma-59878123 --enable-automation --no-default-browser-check --no-first-run --disable-default-apps --disable-popup-blocking --disable-translate --disable-REDACTED-timer-throttling --disable-renderer-REDACTEDing --disable-device-discovery-notifications --no-sandbox --disable-gpu --window-size=820,800 --js-flags=--expose-gc --headless --disable-gpu --disable-dev-shm-usage --remote-debugging-port=9222 --noerrdialogs --ozone-platform=headless --ozone-override-screen-size=800,600 --use-angle=swiftshader-webgl http://localhost:9876/?id=59878123 (dns block)
  • update.googleapis.com
    • Triggering command: /home/REDACTED/.cache/puppeteer/chrome/linux-136.0.7103.94/chrome-linux64/chrome --type=utility --utility-sub-type=network.mojom.NetworkService --lang=en-US --service-sandbox-type=network --no-sandbox --disable-dev-shm-usage --use-angle=swiftshader-webgl --crashpad-handler-pid=4207 --enable-crash-reporter=, --noerrdialogs --user-data-dir=/tmp/karma-43750514 --change-stack-guard-on-fork=enable --shared-files=network_parent_dirs_pipe:100,v8_context_snapshot_data:101 --field-trial-handle=3,i,1661436699011700004,12674202509836043034,262144 --disable-features=PaintHolding --variations-seed-version (dns block)
    • Triggering command: /home/REDACTED/.cache/puppeteer/chrome/linux-136.0.7103.94/chrome-linux64/chrome --user-data-dir=/tmp/karma-43750514 --enable-automation --no-default-browser-check --no-first-run --disable-default-apps --disable-popup-blocking --disable-translate --disable-REDACTED-timer-throttling --disable-renderer-REDACTEDing --disable-device-discovery-notifications --no-sandbox --disable-gpu --window-size=820,800 --js-flags=--expose-gc --headless --disable-gpu --disable-dev-shm-usage --remote-debugging-port=9222 --noerrdialogs --ozone-platform=headless --ozone-override-screen-size=800,600 --use-angle=swiftshader-webgl http://localhost:9876/?id=43750514 (dns block)
    • Triggering command: /home/REDACTED/.cache/puppeteer/chrome/linux-136.0.7103.94/chrome-linux64/chrome --type=utility --utility-sub-type=network.mojom.NetworkService --lang=en-US --service-sandbox-type=network --no-sandbox --disable-dev-shm-usage --use-angle=swiftshader-webgl --crashpad-handler-pid=4199 --enable-crash-reporter=, --noerrdialogs --user-data-dir=/tmp/karma-59878123 --change-stack-guard-on-fork=enable --shared-files=network_parent_dirs_pipe:100,v8_context_snapshot_data:101 --field-trial-handle=3,i,18353948885078788340,9835682464935558043,262144 --disable-features=PaintHolding --variations-seed-version (dns block)
  • www.google.com
    • Triggering command: /home/REDACTED/.cache/puppeteer/chrome/linux-136.0.7103.94/chrome-linux64/chrome --type=utility --utility-sub-type=network.mojom.NetworkService --lang=en-US --service-sandbox-type=network --no-sandbox --disable-dev-shm-usage --use-angle=swiftshader-webgl --crashpad-handler-pid=4207 --enable-crash-reporter=, --noerrdialogs --user-data-dir=/tmp/karma-43750514 --change-stack-guard-on-fork=enable --shared-files=network_parent_dirs_pipe:100,v8_context_snapshot_data:101 --field-trial-handle=3,i,1661436699011700004,12674202509836043034,262144 --disable-features=PaintHolding --variations-seed-version (dns block)
    • Triggering command: /home/REDACTED/.cache/puppeteer/chrome/linux-136.0.7103.94/chrome-linux64/chrome --user-data-dir=/tmp/karma-43750514 --enable-automation --no-default-browser-check --no-first-run --disable-default-apps --disable-popup-blocking --disable-translate --disable-REDACTED-timer-throttling --disable-renderer-REDACTEDing --disable-device-discovery-notifications --no-sandbox --disable-gpu --window-size=820,800 --js-flags=--expose-gc --headless --disable-gpu --disable-dev-shm-usage --remote-debugging-port=9222 --noerrdialogs --ozone-platform=headless --ozone-override-screen-size=800,600 --use-angle=swiftshader-webgl http://localhost:9876/?id=43750514 (dns block)
    • Triggering command: /home/REDACTED/.cache/puppeteer/chrome/linux-136.0.7103.94/chrome-linux64/chrome --user-data-dir=/tmp/karma-59878123 --enable-automation --no-default-browser-check --no-first-run --disable-default-apps --disable-popup-blocking --disable-translate --disable-REDACTED-timer-throttling --disable-renderer-REDACTEDing --disable-device-discovery-notifications --no-sandbox --disable-gpu --window-size=820,800 --js-flags=--expose-gc --headless --disable-gpu --disable-dev-shm-usage --remote-debugging-port=9222 --noerrdialogs --ozone-platform=headless --ozone-override-screen-size=800,600 --use-angle=swiftshader-webgl http://localhost:9876/?id=59878123 (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

Original prompt

This section details on the original issue you should resolve

<issue_title>[Grid] The chosen positioning strategy for toolbar dropdowns causes them to not display their full contents in certain scenarios</issue_title>
<issue_description> * igniteui-angular version: all

  • browser: all

Steps to reproduce

  1. Open https://stackblitz.com/edit/xwmo8w3s?file=src%2Fapp%2Fgrid%2Fgrid-toolbar-sample%2Fgrid-toolbar-sample-1.component.scss
  2. Lower the height of your browser so that the grid is not fully visible
  3. Open the Column Hiding toolbar dropdown

Result

The dropdown is rendered with parts of it under the viewport making it not usable

Expected result

The dropdown should appear fully. Likely a good fix would be to use Auto position strategy instead of connected as it is now.

</issue_description>

Comments on the Issue (you are @copilot in this section)

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

Copilot AI changed the title [WIP] [Grid] The chosen positioning strategy for toolbar dropdowns causes them to not display their full contents in certain scenarios Fix toolbar dropdown positioning to prevent viewport clipping Nov 3, 2025
Copilot AI requested a review from ChronosSF November 3, 2025 09:36
Copilot finished work on behalf of ChronosSF November 3, 2025 09:36
@ChronosSF ChronosSF closed this Nov 6, 2025
@ChronosSF ChronosSF deleted the copilot/fix-5366066-51516387-9711a44d-40a1-4a0d-9b22-51aed96239e7 branch November 6, 2025 08:51
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@ChronosSF ChronosSF Awaiting requested review from ChronosSF

Assignees

@ChronosSF ChronosSF

Copilot code review Copilot

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

[Grid] The chosen positioning strategy for toolbar dropdowns causes them to not display their full contents in certain scenarios

2 participants

@ChronosSF