Top left and bottom left shows the same position

[reefki]

I'm using Vuejs, Browserify and Tether drop 1.4.2. Either using bottom left or top left it shows the same position.

From the console both has the same translateY value:

Here is my component:

import Drop from 'tether-drop';

export default {
    props: {
        trigger: Element,
        position: {
            type: String,
            default: 'bottom left'
        }
    },
    data: function () {
        return {
            drop: null
        }
    },
    ready: function () {
        if (this.trigger) {
            this.initialize();
        }
    },
    methods: {
        initialize: function () {
            this.drop = new Drop({
                target: this.trigger,
                content: this.$els.dropdown,
                constrainToWindow: true,
                position: this.position,
                openOn: 'click'
            });
        }
    }
}

<a href="#" class="button button-primary" v-el:dropdown-trigger>Bottom Left</a>

<dropdown :trigger="$els.dropdownTrigger">
    <li><a href="#">Dashboard</a></li>
    <li><a href="#">Settings</a></li>
    <li><a href="#">Logout</a></li>
</dropdown>

<a href="#" class="button button-primary" :position="top left" v-el:dropdown-trigger2>Top Left</a>

<dropdown :trigger="$els.dropdownTrigger2">
    <li><a href="#">Dashboard</a></li>
    <li><a href="#">Settings</a></li>
    <li><a href="#">Logout</a></li>
</dropdown>

[reefki]

Here is the fiddle: https://jsfiddle.net/reefki/ptn4tejo/1/

[geekjuice]

drop and tetherare unable to determine the target's dimensions which is why it's having trouble tethering the content. If you change margin to padding in the styles, the behavior is fixed.

[reefki]

...

EDIT: Finally I can figure it out..thanks @geekjuice