Search code examples
tailwind-css

Tailwind css overflow dropdown issue

What is the best way to get a dropdown showing its full height with rounded corner table?

There are suggestions that overflow-hidden should be removed. But if it is removed the rounded corner is looking ugly. Without overflow-hidden, the dropdown is hidden after the table length.

https://play.tailwindcss.com/gZeMiyEPmm

Any help will be appreciated.

Solution

  • The easiest solution that I've found would be to removeoverflow-hidden and add sm:rounded-[xy]-lg (where x is b or t and y is l or r) to proper ths and tds.

    To simplify things I think that it would be easier to just add this to your css:

    table thead tr th:first-of-type {
  @apply sm:rounded-tl-lg;
}

table thead tr th:last-of-type {
  @apply sm:rounded-tr-lg;
}

table tbody tr:last-of-type td:first-of-type {
    @apply sm:rounded-bl-lg;
}

table tbody tr:last-of-type td:last-of-type {
    @apply sm:rounded-br-lg;
}