Open dropdown menu upwards when there is no room

[diegosanw]

Hi everyone!
Say I have a table with dropdown option for each row ("..." button), how would I open last items' dropdown menus upwards, when there is not enough room downwards?
Any ideas on how to solve this? Thanks!

[deadcoder0904]

@ds-perfit I faced a similar problem while implementing it. I found the answer through StackOverflow & I found a comment in my code:

{/* bottom-0 will open the select menu up & mb-11 will put the dropup above the select option */}

You should put this above the div of Transition which has a child of Listbox.Options:

<div className="absolute bottom-0 z-10 w-full mt-1 bg-white rounded-md shadow-lg dark:bg-blue-gray-700 mb-11">
  {/* bottom-0 will open the select menu up & mb-11 will put the dropup above the select option */}
  <Transition
    show={open}
    leave="transition duration-100 ease-in"
    leaveFrom="transform opacity-100"
    leaveTo="transform opacity-0"
  >
    <Listbox.Options
      static
      className="py-1 overflow-auto text-base rounded-md max-h-56 ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm"
    >
			  .
				.
				.
		</Listbox.Options>
  </Transition>
</div>

[adamwathan]

I would recommend using Popper.js:

https://popper.js.org

[deadcoder0904]

Oh yeah, that looks like a better solution if you're building a web app. For me, it was a Chrome Extension so I didn't mind :)

[diegosanw]

Thanks! that should do the job. I'll give it a try =)