MassAutocomplete icon indicating copy to clipboard operation
MassAutocomplete copied to clipboard

fix ac container positionning

Open bobbybobby opened this issue 8 years ago • 1 comments

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');
  }

bobbybobby avatar Oct 05 '16 14:10 bobbybobby

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?

hakib avatar Oct 08 '16 07:10 hakib