Linkit Dialog list has no background color

Possible solution:

Link Dialog is coming fine with background color

Steps followed to reproduce this issue:
1) In Drupal 10.1.2, I have added linkit 6.1.0
2) Configured the linkit profile and enabled them in text formats [ ckeditor ]
3) Then edited a content and tried adding a link.
4) The link autocomplete dialog is coming fine. ( I have checked as both authenticated and administrator user). I have attached the image for the reference.
5) I have used chrome browser.

I further debugged and checked ck-balloon-panel class has the background color settings which is automatically getting added.

This issue only happens when a new paragraph is added, not when editing an existing one.
The transparent background is not the problem, but the widget height is not updating when results are shown. This causes an overflow.

This needs clarification on what the exact trigger is, per the comment above, and then it looks like a patch to address overflow might be the thing that is needed. Setting to "maintainer needs more info."

As ArneM already mentioned, the issue seems to only happen when adding a new paragraph. I noticed that when adding a new paragraph the .ui-menu is missing an inline style of position:relative;, which results in it being positioned absolutely, when adding a position of relative the overflow issue seems to be fixed.

When editing an existing paragraph you can see that the .ui-menu has an inline style of position:relative;

In my case, I had the issue not only with new paragraphs but even old ones as long as they use CKEditor5. I've looked into the ck-reset_all class who apply the background: transparent on the Linkit widget, and so despite the presence of the ck-reset_all-excluded class. And I realize that CKEditor reset class actually exclude everything below the exclusion class but not to the widget div itself (.ck-reset_all :not(.ck-reset_all-excluded *)). So the patch suggested by carma03 did not worked for me.

I came around with this by moving the background-color property to the linkit-result-line class to avoid this behaviour.

Thanks! The fix from #9 is working in general.

I have the same issues within paragraphs only.

We did have this as well sometimes and sometimes not on a given site.

The background is not really the problem here. The main problem is the position definition. The

with the suggestions needs to be position: relative so that it's within the container so that it expands and then also provides the white background.

What we found while comparing is on pages where it works vs. where it doesn't work is order of CSS definitions that are being applied. There are multiple overrides in place here, linkit has these two definitions:

/* Override the default jQuery UI theme */
.linkit-ui-autocomplete {
  max-height: calc((100vh - 80px)/2);
  overflow: auto;
  position: relative;
}

.linkit-ui-autocomplete.ui-widget {
  font-size: .9em;
  max-width: inherit;
  position: absolute;
}

So it's set to relative, and then with ui-widget immediately changed to absolute again. I don't know why.

The whole thing is then again combined with the reset CSS:

.ck-reset_all :not(.ck-reset_all-excluded *), .ck.ck-reset, .ck.ck-reset_all {
  box-sizing: border-box;
  height: auto;
  position: static;
  width: auto;
}
.linkit-ui-autocomplete.ui-widget {
  font-size: .9em;
  max-width: inherit;
  position: absolute;
}

These two definitions seem to have equal weight/specificity, so it depends in which order they are applied. if ck-reset_all is first, then it works, if position:absolute wins, it does not.

As #9 says, there is something weird with the reset class that's not actually working, but not having that wouldn't really fix it I think.

Any reason why we can't just remove that position:absolute?

It looks like that was added in 🐛 Linkit field widget expands to 100% of page width Fixed , but maybe it needs to be specific to link elements then?

Here is a quick hack to override that position *again* within ckeditor, but I'd rather find a way to not override the position three times, but that needs someone more skilled than me with CSS. It looks like the autocomplete element there doesn't have a useful wrapper that we can target.

The last submitted patch, 13: linkit-relative-3381766-13.patch, failed testing. View results →

This issue was also happening to me and looking at the comments, I agree that the background is not an issue but the position is. Locally, removing the position absolute from .linkit-ui-autocomplete.ui-widget makes everything work as expected, as mentioned by Berdir in comment #11
It seems that for some reason, when you don't have position: absolute set in the css, there's a JS file that sets the position to relative in inline styles which ensures it works properly.
I tried to debug where this came from and it seems to be coming from the jquery.ui file draggable.js, line 407:

_setPositionRelative: function() {
		if ( !( /^(?:r|a|f)/ ).test( this.element.css( "position" ) ) ) {
			this.element[ 0 ].style.position = "relative";
		}
	},

My proposed solution is to remove the position absolute from the css, unless there's a reason to have it?

For more information, I'm using:
- Drupal v10.2.3
- Linkit v6.1.2
- CKEditor5 v10.2.3

sorry, the patch should be this :)

#17 works great for me. Thank you!

The reason that was added is link fields, without the absolute definition, they somehow span over the whole screen with and beyond. See the issue referenced in comment #12. This just reverts that, fixing this but breaking the other use case.

#13 works for me!