Problem if the checkboxLayer is too close to right margin about angular-multi-select HOT 8 CLOSED

Hi @apedrolli ,

Need to have a look first.. Can you paste your code (with those long labels) into plunker or jsfiddle?

from angular-multi-select.

Here you are!
http://embed.plnkr.co/s0ehmpGx2NVTq7PZrAWN/preview

thanks.

p.s. the problem is not on the label of the button, but on the label of the items in the item list

from angular-multi-select.

Hi @apedrolli ,

This is the consequence of using position: absolute on the checkboxLayer. There's nothing I can do about this.

If it's really important to you, either you change your page layout, or you can do this:

1. Get the screen (or maybe viewport?) width
2. Get the x pos of the checkboxLayer
3. Get the width of the checkboxLayer
4. If ( checkboxLayer x pos + checkboxLayer width ) > screen width then add that right: 0px;

Painful, I know :)

from angular-multi-select.

I'll try it! Little help on where this must be done? I think inside angular-multi-select.js, but where?
This info will fast me a lot.
Thanks.

from angular-multi-select.

I think you can do this using the on-open callback instead, so you can define the function in your controller.

One possible problem; I'm not sure how are you going to grab that particular checkboxLayer, especially if you are using more than one directive in a page. Maybe you really need to wrap that directive in a div, give an ID to that div, and then you grab it using the div's #ID .checkboxLayer selector.

from angular-multi-select.

You're right! I was forgetting that there are those callbacks!
I'll definitely try.
Thanks again!

from angular-multi-select.

if it could be usefull for someone, here is my code:

$scope.calcolaPosizione = function ($event) {

        var s = event.target.nextElementSibling;
    if (s.getBoundingClientRect) {        // Internet Explorer, Firefox 3+, Google Chrome, Opera 9.5+, Safari 4+
        var rect = s.getBoundingClientRect ();
        x = rect.left;
        //y = rect.top;
        w = rect.right - rect.left;
        //h = rect.bottom - rect.top;
        console.log(" Left: " + x + "\n Width: " + w);
    }
    else {
        console.log("Your browser does not support this example!");
    }
    var win = $window.innerWidth ;
    if (x + w > win) {
        console.log("need to set right:0");
        event.target.nextElementSibling.style.right = "0px";
    }
}

called by on-open="calcolaPosizione()"

thanks for the hints.

from angular-multi-select.

Hi @apedrolli ,

Thanks, great job on the code. Now I know what to suggest when others have similar problem.

I'll be closing this issue then. Cheers.

from angular-multi-select.