Skip to content

Conversation

@bobbybobby
Copy link

Hi,
I have an issue with the positionning of the AC container when the massautocomplete field is inside a positionned block, of fixed height with overflow: scroll.

That is because in _position_autocomplete(), the scroll of the body element is taken into account, but not the scroll of said container. I put an example of my problem in this plunker :
https://plnkr.co/edit/6pRPNSM8ulKPsuTLYEA9?p=preview

My idea is to force the AC container to be positionned in reference to the

block. So the position_autocomplete() function would simply be :

config.position_autocomplete = function(container, target) {
  var rect = target[0].getBoundingClientRect();

  container[0].style.left = 0;
  container[0].style.top = rect.height + 'px';
  container[0].style.width = rect.width + 'px';
};

And we need to make sure that

is a positionned element, with something like that :

  if (['fixed', 'absolute', 'sticky', 'relative'].indexOf($element.css('position')) === -1) {
    $element.css('position', 'relative');
  }

@hakib
Copy link
Owner

hakib commented Oct 8, 2016

Hey @bobbybobby,

The position auto_complete function was moved to a provider for this purpose - so it can be customized by the consumer.

You can override the function in you project by injecting the provider to the app config:

angular.module('myApp', [''])

.config(massAutocompleteConfigProvider, function() { 

    massAutocompleteConfigProvider.position_autocomplete = function(container, target) { 
        // ... Your implementation
    }
})

Is this something that can solve your issue in this case?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants