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.
Add CSS
overflow: auto;
max-height: calc((100vh - 80px) / 2); in .linkit-ui-autocomplete.ui-widget in the file css/linkit.autocomplete.css
| Comment | File | Size | Author |
|---|---|---|---|
| #19 | linkit-autocomplete-scrollbar-3595747.patch | 1.06 KB | sakshi@17 |
| #18 | Screenshot from 2026-06-18 13-58-18.png | 208.34 KB | drumanuel |
| #17 | after-patch.png | 65.82 KB | dkmishra |
| #17 | before-patch.png | 70.59 KB | dkmishra |
| #14 | 3595745-14.patch | 2.91 KB | drumanuel |
Show commandsStart 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:
changes
Comments
Comment #2
keshavv commentedComment #3
keshavv commentedComment #4
keshavv commentedComment #5
keshavv commentedComment #6
keshavv commentedComment #7
dkmishra commented@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.
Comment #8
dkmishra commentedHi @keshavv, it would be great if you could create a merge request for this patch.
Comment #11
debdeep.mukhopadhyay commentedHi @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
Comment #12
dkmishra commentedComment #13
drumanuel commentedI'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.
Comment #14
drumanuel commentedupdated version of the my patch. Patches version 7.0.15
Comment #15
drumanuel commentedComment #16
dkmishra commentedHi @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.
Comment #17
dkmishra commentedPatch #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.
Comment #18
drumanuel commentedJust 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?
Comment #19
sakshi@17 commentedTesting 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.
Comment #21
mark_fullmerI rolled the JS constraint for the dropdown width into the merge request. Manually tested on Claro, Gin, and Drupal core's new (experimental) Default Admin theme. In each case, the dropdown width and scrolling behavior is consistent and unproblematic, both in Linkit's CKEditor autocomplete and as a link field autocomplete.
Marking as fixed!