Position incorrect when on fixed elements

[MattShrider]

JSbin with issuee:
http://jsbin.com/xirukapuho/1/edit?html,css,js,output

When the dropdown is on a fixed element, floating somewhere below the top of the page, the dropdown position is calculated incorrectly. I think this is due to the fact that the position is calculated relative to the document, but the absolute style is relative to the parent.

This could solved by finding the directive element's offset from the top of the page (and left) and subtracting from the position value.

[hakib]

Hey @MattShrider, I just took a look at your proposed PR.

The specific problem you encountered exists only if the container is in a fixed positioned element. Placing the mass-autocomplete container out of the fixed element make the positioning work fine as it is today (look here ). Trying the same example with your dev version will cause problems when scrolling (see here ).

So this reduces our problem to situations where you have the AC container within a fixed positioned container.

I've set up an example here with all situations. As you can see the situation where the AC-container is within a fixed positioned element does not position correctly. I though of setting the AC container to relative but then any fixed input within that container will not position properly (I also assume that this is the common use case).

I know that other libraries solve this by appending the menu to the element's container. I would like to avoid that if possible. Do you have any suggestions ?

Thanks, Haki.

[elifio]

I'm Using ngDialog a ngmodule to open modals windows
and displays also in the wrong position.

It is possible to solve the problem by changing the position in the script

You can see in the plunker

http://plnkr.co/edit/4aDGuv?p=preview

[hakib]

Hey @elifio,
This is the problem we discussed above - How to properly position an element on a fixed container.

I'm a bit time constrained at the moment so if anyone wants to take a crack at this i would appreciate it.

Haki.

[psdcoder]

Hi! I think we shouldn't calculate position of dropdown dynamically.
I forked mentioned above plunker and added styles which fix that problem: http://plnkr.co/edit/3rfOkq4D46mzwB5FXo53?p=preview

/* fix styles */
[mass-autocomplete] {
  position: relative;
}

.ac-container {
  position: absolute;
  top: 100% !important;
  left: 0 !important;
  width: 100% !important;
}

What do you think about that?

[hakib]

Hey @psdcoder , This might solve @elifio problem but it wont solve the fixed positioning problem discussed above, look here.

You cannot use relative positioning on the AC container unless you append it to the actual element.

[kperwel]

Thanks @psdcoder. Imo it's perfect solution. I don't see reason to use JS for positioning, when there is still additional container required. There should be information in documentation, that container have to be exactly in size of input.

@hakib, How about this one?
http://jsbin.com/megodehibi/18/

I know, a lot more (mass-autocomplete) directives, but more bulletproof solution, and less js calculations.

[asciant]

@hakib Thanks for taking the time to explain this one, I moved the <div mass-autocomplete></div> a little further up the tree and it started rendering in the correct position.

Cheers

[jbarros35]

Tried everything didnt worked as expected.

´

´
´ ´

What's New

<textarea class="form-control vresize" rows="5" placeholder="Update your status, the first phrase before break will be your title post." ng-model="description" required my-maxlength="1024"></textarea>

   <div ng-controller="mainCtrl" class="form-group">
       <div mass-autocomplete>
           <input ng-model="dirty.value" mass-autocomplete-item="autocomplete_options">
       </div>
   </div>
    <!--input type="text" class="form-control vresize" auto-complete ui-items="names"
           placeholder="Music Categories, band names, music name etc (ex:rock,indie,pop) No space allowed."
           ng-pattern="/^[a-zA-Z0-9,]*$/" ng-model="categories" required ng-maxlength="155"/-->

  <button class="btn btn-success pull-right" type="submit" ng-disabled="postForm.$invalid">Post</button>

 <ul class="list-inline">
  <li><a href=""></a></li>
  <li><a href=""></a></li>
  <li><a href=""></a></li></ul>

</form>

´

ps: its bootstrap classes.

[albogdano]

I'm using Foundation with AngularJS 1.4.8 and had similar issues with positioning but I wasn't attaching to a fixed element. The CSS suggested by @psdcoder helped me fix the issue. Perhaps this could be added to the docs in the future. Thanks for the great plugin!

[imdreamrunner]

Thanks @psdcoder your code works for me.

[thethakuri]

Removing following lines when used inside a modal worked for me:

container.style.top = rect.top + rect.height + scrollTop + 'px'; 
container.style.left = rect.left + scrollLeft + 'px'; 

[hakib]

I just pushed v0.3.0 with a way of overriding the default positioning function. By overriding the function you could set the container to be fixed positioned and made all the necessary adjustments to the ac container.

[abourakba]

Hello @hakib
Could you explain how it works now ?
The documentation states that I can use position_autocomplete(container, target)
I tried to add a position_autocomplete function in my autocomplete_options but it does not work.
$scope.autocomplete_options = { suggest: $scope.suggest_state, on_select : $scope.suggest_selecthandler, on_error : function(){ Notification.error("Auto Complete Fail !"); }, position_autocomplete : function(container, target){ console.log("position_autocomplete ") } };

Best Regards
Abdou

[hakib]

Hey @abourakba,

The position_autocomplete settings is done via the directive provider.

In you'r main app inject the provder

angular.module('app', [
    'ngSanitize',
    'MassAutoComplete',
])

.run(['massAutoCompleteConfigProvider', function(massAutoCompleteConfigProvider) { 

    massAutoCompleteConfigProvide.position_autocomplete(container, target) {
        // Your code.
    }
}]);

[abourakba]

Hello @hakib
I used a cheap solution by adding a css class to my tag

and then I added the piece of CSS : .my-autocomplete .ac-container{ position : relative; top: 100% !important; left: 0 !important; width: 100% !important;

}

I tried to use the run on my main app but I get some error.

Many thanks for your quick response.

I will try more tomorrow :)

Best Regards
Abdou

[heese]

To override position_autocomplete the following code worked for me:

angular.module('app', ['ngSanitize', 'MassAutoComplete'])
.run(['massAutocompleteConfig', function(massAutocompleteConfig) { 
    massAutocompleteConfig.position_autocomplete(container, target) {
        // Your code.
    }
}]);