By noopal on

Hi

The module is calling drupal.autocomplete.

I've tried to debug what this calls and it looks like its the autocomplete.js within the core jquery.ui folder.

This is positioning a div as absolute then using offset to make the div look as though it is a dropdown on the autocomplete form element.

As the position is being set through jquery it can't be overridden in CSS.

Do I just create a custom jquery function to alter the offset position.
Or is there a drupal specific way of overridding the offset?

For clarity this is what I am refering to.
https://api.jqueryui.com/autocomplete/

This is part of drupal core, and there is an offset option, which allows where the autocomplete dropdown is positioned in relation to the input form element, for example if it is aligned left ot right, whether it opens upwards or downwards. etc.

This is being called through a module, but how can I configure/theme the offset?

Thanks for any help

⋅ Categories: Drupal 8.x

Comments

johnpitcairn’s picture

johnpitcairn commented

You can override anything set in an element's style property by using the !important modifier in your css, for example:

.some-element {
top: 10px !important;
}

noopal’s picture

noopal commented

Hi

It is an offset of the input, where as top will be 10px from the top of the page not the input.

The top position is dynamically set depending on where the input is on the page. So will always be different.

devashish jangid’s picture

devashish jangid commented

Hi @noopal

May be this will help try using this function in your js file, you can write your jquery inside this function this will override the default jquery

Defination::

  function applyWhenElementExists(selector, myFunction, intervalTime) {
    var interval = setInterval(function() {
      if (jQuery(selector).length > 0) {
        myFunction();
        clearInterval(interval);
      }
    }, intervalTime);
  }

Calling::

applyWhenElementExists(".selector", function(){
   //write your jquery code here...
}, 50); 

Thankyou