Force dropdown menu to render in a different place

[Joseff-Evans]

Hey,

I am trying to get the dropdown menu to render under one of my divs rather than under the root - is this possible?

I have tried the following:

<DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button variant="outline" size="icon">
          <Sun className="LogIT-h-[1.2rem] LogIT-w-[1.2rem] LogIT-rotate-0 LogIT-scale-100 LogIT-transition-all dark:LogIT--rotate-90 dark:LogIT-scale-0" />
          <Moon className="LogIT-absolute LogIT-h-[1.2rem] LogIT-w-[1.2rem] LogIT-rotate-90 LogIT-scale-0 LogIT-transition-all dark:LogIT-rotate-0 dark:LogIT-scale-100" />
          <span className="LogIT-sr-only">Toggle theme</span>
        </Button>
      </DropdownMenuTrigger>
        <DropdownMenuPortal container={document.getElementById('Test-root') as HTMLElement}>
          <DropdownMenuContent className='radix-dropdown' align="end">
            <DropdownMenuItem onClick={() => setTheme("light")}>
              Light
            </DropdownMenuItem>
            <DropdownMenuItem onClick={() => setTheme("dark")}>
              Dark
            </DropdownMenuItem>
            <DropdownMenuItem onClick={() => setTheme("system")}>
              System
            </DropdownMenuItem>
          </DropdownMenuContent>
        </DropdownMenuPortal>
      </DropdownMenu>

But this still seems to render under the root

[Neutrlno]

you have to be sure document.getElementById('Test-root') gives NOT undefined at the moment dropdown is rendered, then it should work fine. What it would give you though? Because the content is rendered inside a popper primitive which is built in, has fixed positioning and doesnt give explicit handles for manipulation. In other words im looking for not super hacky ways to position the content nicely