Linkit Dialog list has no background color

Created on 17 August 2023, 10 months ago
Updated 21 May 2024, 26 days ago

Problem/Motivation

While the links dialog is opened, there is no background color behind them and visually it is annoying.

Steps to reproduce

  1. Add a link clicking the Link button in the CKEditor5 toolbar
  2. After the list dialog is opened, it is shown with transparency background.

Issue reproduced on:

  • Drupal 10.1.2
  • PHP 8.1.18
  • Lando v3.18.0
  • Linkit 6.1.0

Proposed resolution

  1. Add the background CSS property into the linkit.autocomplete.css file

Remaining tasks

User interface changes

API changes

Data model changes

🐛 Bug report
Status

Needs work

Version

7.0

Component

Code

Created by

🇨🇴Colombia carma03

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @carma03
  • 🇨🇴Colombia carma03

    Possible solution:

  • Status changed to Needs review 10 months ago
  • Open in Jenkins → Open on Drupal.org →
    Core: 10.1.x + Environment: PHP 8.1 & MariaDB 10.3.22
    last update 10 months ago
    Patch Failed to Apply
  • 🇮🇳India NivethaSubramaniyan

    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.

  • 🇧🇪Belgium ArneM

    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.

  • Status changed to Postponed: needs info 10 months ago
  • 🇺🇸United States mark_fullmer Tucson

    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."

  • 🇳🇱Netherlands BurakBaykara

    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.

  • 🇵🇱Poland azovsky

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

    I have the same issues within paragraphs only.

  • Status changed to Needs work 4 months ago
  • 🇨🇭Switzerland Berdir Switzerland

    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?

  • 🇨🇭Switzerland Berdir Switzerland

    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?

  • Status changed to Needs review 4 months ago
  • Open in Jenkins → Open on Drupal.org →
    Core: 10.2.x + Environment: PHP 8.1 & MariaDB 10.3.22
    last update 4 months ago
    82 pass, 2 fail
  • 🇨🇭Switzerland Berdir Switzerland

    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.

  • 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 :)

Production build 0.69.0 2024