Hi folks!

So I'm not sure how to properly do this and this extends a bit on Vue but the folks here have been really helpful so I thought I'd give this sub a try. So I have a custom dropdown that I use because the design requires a text underneath the quantity when selected and the only way I can think of doing this is through my implementation.

Given my implementation, what's the best way to enhance this so that the drop-down list can be dynamically position? For example, if the button is all the way to the bottom, the drop-down should open atop the selection.

``` <template> <div class="add-to-cart"> <div class="add-to-cart__select" :tabindex="tabindex" @blur="open = false"> <div class="add-to-cart-select__selected" :class="{ 'add-to-cart-select__selected': open }" @click="open = !open" > <div class="add-to-cart-selected-value"> <span class="add-to-cart-selected-value__text"> {{ selected }} </span> <span class="add-to-cart-selected-value__text-suffix">SERVING</span> </div> <div class="add-to-cart-selected-value__triangle"></div> </div> <div class="add-to-cart-select__items" :class="{ 'add-to-cart-select__items-hide': !open }"> <div v-for="(option, i) of options" :key="i" class="add-to-cart-select__item" @click=" selected = option; open = false; $emit('input', option); " > {{ option }} COUNT </div> </div> </div> <button class="add-to-cart__button" type="button" @click="addToCart">Add to Cart</button> </div> </template>

<script> const md5 = require('md5'); export default { props: { options: { type: Array, required: true, }, default: { type: String, required: false, default: null, }, product: { type: Object, required: true, default: null, }, tabindex: { type: Number, required: false, default: 0, }, }, data() { return { selected: this.default ? this.default : this.options.length > 0 ? this.options[0] : null, open: false, }; }, methods: { addToCart() { this.$store.dispatch('modules/cart/addToCart', { id: md5(this.product.id), product_id: this.product.id, product: this.product, quantity: this.selected, });

        this.$router.go(-1);

        this.$toast.show(`${this.product.name} was added to your cart`, {
            position: 'top-center',
            duration: 2450,
            fullWidth: true,
            type: 'success',
            theme: 'toasted-primary',
        });
    },
},

}; </script>

<style lang="scss" scoped> .add-to-cart { display: flex; flex-direction: row; width: 200px; background: $color-yellow; border-radius: 7px;

&__select {
    width: 34%;
    position: relative;
    text-align: left;
    outline: none;
    border-radius: 4px;
}

&__button {
    width: 66%;
    background: $color-yellow;
    text-transform: uppercase;
border: none; border-radius: 7px;
font-size: 0.9rem;
letter-spacing: 0.04rem;
    font-family: $gt-pressura-bold;
    color: $color-maroon;
}

}

.add-to-cart-select { &__selected { border: none; color: $color-maroon; font-family: $gt-pressura-bold; background-color: $color-darker-yellow; border-radius: 7px; padding-left: 1em; cursor: pointer; user-select: none; min-width: 66px; }

&__selected-open {
    border: 1px solid $color-dark-orange;
    border-radius: 6px 6px 0px 0px;
}

&__items {
    min-width: 105px;
    display: flex;
    flex-direction: column;
    color: $color-maroon;
    border-radius: 0px 7px 7px 7px;
    overflow: hidden;
    border-right: 1px solid $color-dark-orange;
    border-left: 1px solid $color-dark-orange;
    border-bottom: 1px solid $color-dark-orange;
    position: absolute;
    background-color: $color-darker-yellow;
    left: 0;
    right: 0;
    z-index: 1;
}

&__items-hide {
    display: none;
}

&__item {
    font-size: 18px;
    font-family: $gt-pressura-bold;
    color: $color-maroon;
    margin-left: 10px;
    cursor: pointer;
    user-select: none;
    min-height: 1.2em;
    padding: 0px 2px 1px;

    &:hover {
        background-color: $color-dark-orange;
    }
}

}

.add-to-cart-selected-value { display: flex; flex-direction: column; width: 30px; align-items: center;

&__text {
    font-size: 18px;
}

&__text-suffix {
    position: relative;
    top: -0.5em;
    font-size: 10px;
}

&__triangle {
    &:after {
        position: absolute;
        content: '';
        top: 1em;
        right: 0.5em;
        width: 0;
        height: 0;
        border: 5.5px solid transparent;
        border-color: $color-maroon transparent transparent transparent;
    }
}

} </style> ```