Problem/motivation

When Linkit is used with the Gin admin theme, the vertical scrollbar does not work when the widget is used for a node field URL link outside of CKEditor.
The CSS is currently written specifically for CKEditor, so it is not applied when the module is used for a node field URL link.

Steps to reproduce

  1. Create a new link field in the node
  2. Set the linkit widget for that field in the manage form display
  3. Create a node and type the string in URL field.

Solution

Add CSS

overflow: auto;
  max-height: calc((100vh - 80px) / 2);

in .linkit-ui-autocomplete.ui-widget in the file css/linkit.autocomplete.css

CommentFileSizeAuthor
#19 linkit-autocomplete-scrollbar-3595747.patch1.06 KBsakshi@17
#18 Screenshot from 2026-06-18 13-58-18.png208.34 KBdrumanuel
#17 after-patch.png65.82 KBdkmishra
#17 before-patch.png70.59 KBdkmishra
#14 3595745-14.patch2.91 KBdrumanuel
#13 3595745-13.patch2.92 KBdrumanuel
#7 vertical-scroll-issue-after-fix.png122.23 KBdkmishra
#7 vertical-scroll-issue-before-fix.png110.94 KBdkmishra
#6 3595745-5.patch382 byteskeshavv

Issue fork linkit-3595747

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

keshavv created an issue. See original summary.

keshavv’s picture

keshavv commented
Issue summary: View changes
keshavv’s picture

keshavv commented
Issue summary: View changes
keshavv’s picture

keshavv commented
Version: 7.1.x-dev » 7.x-dev
keshavv’s picture

keshavv commented
Issue summary: View changes
keshavv’s picture

keshavv commented
StatusFileSize
new 3595745-5.patch382 bytes
dkmishra’s picture

dkmishra commented
StatusFileSize
new vertical-scroll-issue-before-fix.png110.94 KB
new vertical-scroll-issue-after-fix.png122.23 KB

@keshavv, I tested the patch and the issue appears to be resolved.

Environment used for testing:

- Theme: Gin
- Drupal: 11.3.11
- PHP: 8.3
- Linkit: 7.0.15

I've attached screenshots for reference.

dkmishra’s picture

dkmishra commented

Hi @keshavv, it would be great if you could create a merge request for this patch.

debdeep.mukhopadhyay made their first commit to this issue’s fork.

debdeep.mukhopadhyay opened merge request !168

debdeep.mukhopadhyay’s picture

debdeep.mukhopadhyay commented

Hi @keshav @dkmishra ,

I also tested the patch on my local and it works as expected. The vertical scrolling issue is resolved after applying the fix. Thanks for the patch.

I have created a merge request for review.

Thanks

dkmishra’s picture

dkmishra commented
Status: Active » Reviewed & tested by the community
drumanuel’s picture

drumanuel commented
StatusFileSize
new 3595745-13.patch2.92 KB

I've added a flip/height calculation as for me, the autocomplete lives at the bottom of the page. (100vh - 80px) / 2 was still causing it to go off screen.

drumanuel’s picture

drumanuel commented
StatusFileSize
new 3595745-14.patch2.91 KB

updated version of the my patch. Patches version 7.0.15

drumanuel’s picture

drumanuel commented
dkmishra’s picture

dkmishra commented
Status: Reviewed & tested by the community » Needs review

Hi @drumanuel, thanks for pointing this out and for providing the additional fix. We'll take another look at the issue and review the updated approach. Your feedback about the height calculation and the autocomplete positioning at the bottom of the page is very helpful.

dkmishra’s picture

dkmishra commented
StatusFileSize
new before-patch.png70.59 KB
new after-patch.png65.82 KB

Patch #14 introduces a UI regression. Previously, the autocomplete dropdown had sufficient spacing below it. After applying this patch, it expands to the bottom of the viewport and nearly touches the screen edge.

Additionally, the JavaScript viewport calculation and menu repositioning changes appear to be outside the scope of this issue.

I recommend proceeding with the smaller CSS-only approach from patch #6 instead.

For reference, I have attached screenshots.

drumanuel’s picture

drumanuel commented
StatusFileSize
new Screenshot from 2026-06-18 13-58-18.png208.34 KB

Just some extra info:

I have an entity reference field in a modal at the bottom of the form (a paragraph form in layout paragraphs). Because there is no scrollbar the contents falls outside of the screen, unreachable for the user. The (100vh - 80px) / 2 does not fix this. I've added a screenshot.

You want another ticket for this?

sakshi@17’s picture

sakshi@17 commented
StatusFileSize
new linkit-autocomplete-scrollbar-3595747.patch1.06 KB

Testing with **Linkit 7.0.12, Drupal 11.2**, and the **Gin admin theme**, we found that the CSS-only patch (#6) resolves the vertical scrolling issue but does not address the dropdown width issue.

The jQuery UI autocomplete dropdown is appended to and sets an inline width: Xpx based on the viewport rather than the width of the input field. As a result, the dropdown can extend significantly beyond the link field and, in some cases, off-screen.

Added a revised patch with the additional fixes:

1. **JS: Constrain dropdown width to the input field**
2. **CSS: Removed max-width: inherit** — was preventing proper width containment
3. **CSS: Vertical scrolling from #6**

Tested with Linkit 7.0.12, Drupal 11.2, and the Gin theme across node edit forms and paragraph fields.