Tailwindcss Dropdown item flying off to edge of the screen instead of under the dropdown button

Question

So Im making an app with Rails, Vue and TailwindCss 1.0+

At present I'm attempting to make a dropdown menu for my products, but when I click on the dropdown button my dropdown that contains my items flys off to the edge of the screen, when it should be under my button..

Im not too sure where I'm going wrong.

Pic of the problem:

Here is how the dropdown menu looks:

<!-- Start LG Products Dropdown -->
  <div class="hidden lg:inline-block">
    <button @click="prodOpen = !prodOpen" role="button" class="relative z-10 inline-block select-none focus:outline-none text-base font-normal text-blue-600 hover:text-green-600 header-font focus:text-green-600">
      <i class="fal fa-sitemap"></i><span class="ml-1">Products</span>
    </button>
    <button v-if="prodOpen" @click="prodOpen = false" class="fixed inset-0 bg-black opacity-25 h-full w-full cursor-default"></button>
  </div>
  <div v-if="prodOpen" class="absolute left-0 mt-5 bg-white rounded-lg shadow-xl w-40 headerFont text-base font-normal">
    <slot name="dropdown-items"></slot>
  </div>
<!-- End LG Products Dropdown -->

This is the code of the entire nav component:

<template>
  <nav class="flex items-center justify-between flex-wrap bg-white p-6 w-full fixed">
    <a href="https://loadze.com">
      <h1>
        <div class="flex items-center flex-shrink-0 text-blue-600 mr-6 logoFont">
          <span class="font-bold text-3xl tracking-tight"><i class="far fa-truck-loading text-2xl"></i>LOADZE</span>
        </div>
      </h1>
    </a>

    <div class="block lg:hidden">
      <button @click="navOpen = !navOpen" class="flex items-center px-3 py-2 border rounded text-blue-600 border-blue-600 hover:text-green-600 hover:border-green-600 focus:outline-none">
        <svg v-if="!navOpen" aria-hidden="true" focusable="false" data-prefix="far" data-icon="bars" class="svg-inline--fa fa-bars fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg>
        <svg v-if="navOpen" aria-hidden="true" focusable="false" data-prefix="far" data-icon="times" class="svg-inline--fa fa-times fa-w-10" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="currentColor" d="M207.6 256l107.72-107.72c6.23-6.23 6.23-16.34 0-22.58l-25.03-25.03c-6.23-6.23-16.34-6.23-22.58 0L160 208.4 52.28 100.68c-6.23-6.23-16.34-6.23-22.58 0L4.68 125.7c-6.23 6.23-6.23 16.34 0 22.58L112.4 256 4.68 363.72c-6.23 6.23-6.23 16.34 0 22.58l25.03 25.03c6.23 6.23 16.34 6.23 22.58 0L160 303.6l107.72 107.72c6.23 6.23 16.34 6.23 22.58 0l25.03-25.03c6.23-6.23 6.23-16.34 0-22.58L207.6 256z"></path></svg>
      </button>
    </div>

    <div :class="navOpen ? 'block' : 'hidden'" class="w-full block flex-grow lg:flex lg:items-center lg:w-auto">
      <div class="text-sm lg:flex-grow">
        <slot name="nav-left"></slot>

        <!-- Start LG Products Dropdown -->
          <div class="hidden lg:inline-block">
            <button @click="prodOpen = !prodOpen" role="button" class="relative z-10 inline-block select-none focus:outline-none text-base font-normal text-blue-600 hover:text-green-600 header-font focus:text-green-600">
              <i class="fal fa-sitemap"></i><span class="ml-1">Products</span>
            </button>
            <button v-if="prodOpen" @click="prodOpen = false" class="fixed inset-0 bg-black opacity-25 h-full w-full cursor-default"></button>
          </div>
          <div v-if="prodOpen" class="absolute left-0 mt-5 bg-white rounded-lg shadow-xl w-40 headerFont text-base font-normal">
            <slot name="dropdown-items"></slot>
          </div>
        <!-- End LG Products Dropdown -->
      </div>
      <div>
        <slot name="nav-right"></slot>
      </div>
    </div>
  </nav>
</template>

<script>
export default {
  data () {
    return {
      navOpen: false,
      prodOpen: false
    }
  }
}
</script>

Answer 1

I'm not fully understanding your issue. But if I see the screenshot I guess it's the alignment you are talking about. Based on this conclusion.

If this is the case you have to change the following: left-0 to right-0.

<div v-if="prodOpen" class="absolute left-0 mt-5 bg-white rounded-lg shadow-xl w-40 headerFont text-base font-normal">
    <slot name="dropdown-items"></slot>
</div>

To:

<div v-if="prodOpen" class="absolute right-0 mt-5 bg-white rounded-lg shadow-xl w-40 headerFont text-base font-normal">
    <slot name="dropdown-items"></slot>
</div>

This will let the div align from right to left, if it's extends/needs more room, it will expand to the middle of the screen.