Shoelace dropdown hidden by other elements

  • /attachments/1258469233294180432/1258469233424072744/image.png

    danishnizzle

    6 months ago

    I'm using the Shoelace UI package and having some trouble with a dropdown that's getting covered up by a list item below it. Been doing the todo tut and trying to add feature to have options menu to duplicate/delete todo.

    First image shows list item component I've created which contains my options menu as I intend it to look, 2nd shows the issue. 3rd just shows that it seems to only impact the dropdown when it goes to list items below it.

    I'm guessing this is using the popover API as z-index doesn't seem to have any impact.
    image.png
    image.png
    image.png
  • Lucas G

    6 months ago

    Shoelace package uses a third party library via CDN for its styles and JS
  • I don’t believe it uses the popover api unless it’s been updated recently for it
  • danishnizzle

    6 months ago

    ya - also i don't popover makes sense - from my brief reading - the "top layer" of popover API basically means it is literally on top of everything, no matter what
  • Lucas G

    6 months ago

    Yup
  • danishnizzle

    6 months ago

    something to do w/ stacking context i guess
  • Lucas G

    6 months ago

    All the shoelace components pull in one style and one script link
  • So it should just be JS
  • danishnizzle

    6 months ago

    this freaking dropdown man - im like 8 hours in lol
  • Tod

    6 months ago

    Great energy @danishnizzle! Your continuous contribution to the toddle Community just made you advance to Community Level 3!
  • Lucas G

    6 months ago

    Did you check out the one in the starter pack? That one uses popover if that’s what you’re looking for
  • danishnizzle

    6 months ago

    sorta - i just liked the look and feel of the shoelace one and figured i'd try that first -- will look into that one next
  • im treating this as the hard miles to learn toddle generally so figured i'd bang my head against it for a bit to try and better understand things
  • Lucas G

    6 months ago

    Yeah thats not bad. Making different little things is how I picked it up too
  • Interesting that the shoelace dropdown is doing that though
  • Shouldn’t be the case 🤔
  • danishnizzle

    6 months ago

    i watched a video that basically explained common z-index issues and they went through few issues, like needing to have the element's position you wish to zindex declared as positioned elements get general priority but that doesn't seem to be the issue
  • danishnizzle

    6 months ago

    it's weird b/c in their demo page they work fine over other elements, but for some reason in this list approach im using it doesn't act similarly
  • /attachments/1258469233294180432/1258505391734788197/image.png

    danishnizzle

    6 months ago

    in case anyone else comes across this -- after reading this further, it's my understanding that the hoist attribute being set should in theory address this issue.

    I was playing w/ this on the Shoelace site and this attribute seems to do the trick just fine (1st pic) but when using the same attribute in Toddle, it does not work
    image.png
    image.png
  • danishnizzle

    6 months ago

    FYI as well to other future folks - I was able to fix this issue using the starter pack dropdown instead of shoelace dropdown

Stop scrolling. Start building.

toddle is a visual web app builder that rivals custom code — but accessible to your entire team!

Try toddle — it's free!

© Copyright 2024 toddle. All rights reserved.