React dropdown problem

my react popper doesn’t position the floating container properly
this is my code
import React, { useRef, useState } from “react”;
import “tailwindcss/tailwind.css”;
import logo from “./black_logo_only.png”;
import {
faPenToSquare,
faGear,
faTrashCan,
} from “@fortawesome/free-solid-svg-icons”;
import { FontAwesomeIcon } from “@fortawesome/react-fontawesome”;
import sltBg from “./dots.png”;
import accountAvatar from “./account_avatar.png”;
import DropdownPortal from “./DropdownPortal”;
import { useFloating } from “@floating-ui/react-dom”;

const data = [
{
id: 1,
date: “Today”,
search: [
{
searchTerm: “Operations Management ”,
searchId: 1,
},
{ searchTerm: “today’s weather”, searchId: 2 },
],
exactDate: “2024-5-5”,
},
{
id: 2,
date: “Today”,
search: [
{
searchTerm: “Operations Management ”,
searchId: 3,
},
{ searchTerm: “today’s weather”, searchId: 4 },
],
exactDate: “2024-5-5”,
},
{
id: 3,
date: “Today”,
search: [
{
searchTerm: “Operations Management ”,
searchId: 5,
},
{ searchTerm: “today’s weather”, searchId: 6 },
],
exactDate: “2024-5-5”,
},
{
id: 4,
date: “Today”,
search: [
{
searchTerm: “Operations Management ”,
searchId: 7,
},
{ searchTerm: “today’s weather”, searchId: 8 },
],
exactDate: “2024-5-5”,
},
{
id: 5,
date: “Today”,
search: [
{
searchTerm: “Operations Management ”,
searchId: 9,
},
{ searchTerm: “today’s weather”, searchId: 10 },
],
exactDate: “2024-5-5”,
},
{
id: 6,
date: “Today”,
search: [
{
searchTerm: “Operations Management ”,
searchId: 11,
},
{ searchTerm: “today’s weather”, searchId: 12 },
],
exactDate: “2024-5-5”,
},
{
id: 7,
date: “Today”,
search: [
{
searchTerm: “Operations Management ”,
searchId: 13,
},
{ searchTerm: “today’s weather”, searchId: 14 },
],
exactDate: “2024-5-5”,
},
{
id: 8,
date: “Today”,
search: [
{
searchTerm: “Operations Management ”,
searchId: 15,
},
{ searchTerm: “today’s weather”, searchId: 16 },
],
exactDate: “2024-5-5”,
},
{
id: 9,
date: “Today”,
search: [
{
searchTerm: “Operations Management ”,
searchId: 17,
},
{ searchTerm: “today’s weather”, searchId: 18 },
],
exactDate: “2024-5-5”,
},
];
const Sidebar = () => {
const [chatSelected, setChatSelected] = useState(1);
const [dropDownOn, setDropDownOn] = useState(null);
const dropdownHandler = (id) => {
dropDownOn === id ? setDropDownOn(null) : setDropDownOn(id);
};

const { refs, floatingStyles } = useFloating({
placement: “start-end”,
strategy: “absolute”,
});
return (
<>

New Chat

        <button className="text-[15px]">
          <FontAwesomeIcon
            icon={faPenToSquare}
            style={{ color: "#808080", opacity: "0.8" }}
          />
        </button>
      </div>
      <div className="flex grow-[0.5] items-center gap-2 bg-gray-100 bg-opacity-90 rounded-lg px-[7px] py-[4px] hover:bg-gray-200 w-[290px] ">
        <div className="grow">
          <button className="text-[14px] font-medium">New Command</button>
        </div>

        <button className="text-[15px]">
          <FontAwesomeIcon
            icon={faGear}
            style={{ color: "#808080", opacity: "0.8" }}
          />
        </button>
      </div>
      <div className="flex justify-end py-2">
        <select
          className=" appearance-none bg-no-repeat bg-cover bg-opacity-[0.1] bg-right mr-[38px] focus:outline-none text-[13px] px-2"
          style={{
            backgroundImage: `url("${sltBg}")`,
            backgroundSize: "23px",
            width: "100%",
          }}
        >
          <option value="All" selected>
            All
          </option>
          <option value="Commands">Chats</option>
          <option value="Updates">Commands</option>
        </select>
      </div>
    </div>
    <div className="grow show-scrollbar-on-hover">
      {data.map((data, index) => {
        return (
          <div className="mt-[1.25rem]" key={index}>
            <h3 className="p-2 text-xs opacity-25 font-[700]">
              {data.date}
            </h3>
            <div className="flex gap-1">
              <ul className="text-[14px] ">
                {data.search.map((term, i) => (
                  <div className="flex gap-1">
                    <li
                      className={`rounded-lg p-[.5rem] border border-[solid 1px rgba(160,153,153,0.312)] py-[4px] px-[7px] mb-2 whitespace-nowrap text-ellipsis hover:bg-gray-100 opacity-100 grid grid-cols-[50%50%] hover:cursor-pointer w-[290px] ${
                        chatSelected === term.searchId
                          ? "bg-gray-100"
                          : "bg-white"
                      }`}
                      onClick={() => setChatSelected(term.searchId)}
                      key={i}
                    >
                      <p className="overflow-hidden whitespace-nowrap text-ellipsis">
                        {term.searchTerm}
                      </p>
                      <p className="text-right text-xs">{data.exactDate}</p>
                    </li>
                    <div>
                      <button
                        onClick={() => dropdownHandler(term.searchId)}
                        className="relative"
                        ref={refs.setReference}
                      >
                        <svg
                          xmlns="http://www.w3.org/2000/svg"
                          width="24"
                          height="24"
                          viewBox="0 0 24 24"
                          fill="gray"
                        >
                          <circle cx="6" cy="12" r="2" />
                          <circle cx="12" cy="12" r="2" />
                          <circle cx="18" cy="12" r="2" />
                        </svg>
                      </button>

                      {dropDownOn === term.searchId && (
                        <div
                          ref={refs.setFloating}
                          style={floatingStyles}
                          className={`h-8 w-32 p-2 gap-3 text-[14px] z-[9999] flex items-center bg-white rounded shadow-lg border border-[rgba(164,164,165,0.3)]`}
                        >
                          <button className="">
                            <FontAwesomeIcon
                              icon={faTrashCan}
                              style={{
                                color: "#808080",
                                opacity: "0.8",
                              }}
                            />
                          </button>
                          <button className="text-[14px] font-medium">
                            Delete
                          </button>
                        </div>
                      )}
                    </div>
                  </div>
                ))}
              </ul>
            </div>
          </div>
        );
      })}
    </div>
    <div className="flex pt-[.875rem] gap-2 p-2 items-center">
      <svg
        width="21"
        height="27"
        viewBox="0 0 40 40"
        xmlns="http://www.w3.org/2000/svg"
      >
        {/* Background circle */}
        <circle cx="20" cy="20" r="20" fill="rgba(128, 128, 128, 0.3)" />

        {/* Text with the first letter */}
        <text
          x="50%"
          y="50%"
          textAnchor="middle"
          dominantBaseline="middle"
          fontSize="20"
          fill="black"
          fontFamily="Arial"
        >
          Y
        </text>
      </svg>
      <p className="text-[14px] font-bold">UserName</p>
    </div>
  </div>
</>

);
};

export default Sidebar;
the sidebar is rendered inside an app.js and has another component beside it which is the main partmy react popper doesn’t position the floating container properly
this is my code
import React, { useRef, useState } from “react”;
import “tailwindcss/tailwind.css”;
import logo from “./black_logo_only.png”;
import {
faPenToSquare,
faGear,
faTrashCan,
} from “@fortawesome/free-solid-svg-icons”;
import { FontAwesomeIcon } from “@fortawesome/react-fontawesome”;
import sltBg from “./dots.png”;
import accountAvatar from “./account_avatar.png”;
import DropdownPortal from “./DropdownPortal”;
import { useFloating } from “@floating-ui/react-dom”;

const data = [
{
id: 1,
date: “Today”,
search: [
{
searchTerm: “Operations Management ”,
searchId: 1,
},
{ searchTerm: “today’s weather”, searchId: 2 },
],
exactDate: “2024-5-5”,
},
{
id: 2,
date: “Today”,
search: [
{
searchTerm: “Operations Management ”,
searchId: 3,
},
{ searchTerm: “today’s weather”, searchId: 4 },
],
exactDate: “2024-5-5”,
},
{
id: 3,
date: “Today”,
search: [
{
searchTerm: “Operations Management ”,
searchId: 5,
},
{ searchTerm: “today’s weather”, searchId: 6 },
],
exactDate: “2024-5-5”,
},
{
id: 4,
date: “Today”,
search: [
{
searchTerm: “Operations Management ”,
searchId: 7,
},
{ searchTerm: “today’s weather”, searchId: 8 },
],
exactDate: “2024-5-5”,
},
{
id: 5,
date: “Today”,
search: [
{
searchTerm: “Operations Management ”,
searchId: 9,
},
{ searchTerm: “today’s weather”, searchId: 10 },
],
exactDate: “2024-5-5”,
},
{
id: 6,
date: “Today”,
search: [
{
searchTerm: “Operations Management ”,
searchId: 11,
},
{ searchTerm: “today’s weather”, searchId: 12 },
],
exactDate: “2024-5-5”,
},
{
id: 7,
date: “Today”,
search: [
{
searchTerm: “Operations Management ”,
searchId: 13,
},
{ searchTerm: “today’s weather”, searchId: 14 },
],
exactDate: “2024-5-5”,
},
{
id: 8,
date: “Today”,
search: [
{
searchTerm: “Operations Management ”,
searchId: 15,
},
{ searchTerm: “today’s weather”, searchId: 16 },
],
exactDate: “2024-5-5”,
},
{
id: 9,
date: “Today”,
search: [
{
searchTerm: “Operations Management ”,
searchId: 17,
},
{ searchTerm: “today’s weather”, searchId: 18 },
],
exactDate: “2024-5-5”,
},
];
const Sidebar = () => {
const [chatSelected, setChatSelected] = useState(1);
const [dropDownOn, setDropDownOn] = useState(null);
const dropdownHandler = (id) => {
dropDownOn === id ? setDropDownOn(null) : setDropDownOn(id);
};

const { refs, floatingStyles } = useFloating({
placement: “start-end”,
strategy: “absolute”,
});
return (
<>

New Chat

<FontAwesomeIcon
icon={faPenToSquare}
style={{ color: “#808080”, opacity: “0.8” }}
/>




New Command

    <button className="text-[15px]">
      <FontAwesomeIcon
        icon={faGear}
        style={{ color: "#808080", opacity: "0.8" }}
      />
    </button>
  </div>
  <div className="flex justify-end py-2">
    <select
      className=" appearance-none bg-no-repeat bg-cover bg-opacity-[0.1] bg-right mr-[38px] focus:outline-none text-[13px] px-2"
      style={{
        backgroundImage: `url("${sltBg}")`,
        backgroundSize: "23px",
        width: "100%",
      }}
    >
      <option value="All" selected>
        All
      </option>
      <option value="Commands">Chats</option>
      <option value="Updates">Commands</option>
    </select>
  </div>
</div>
<div className="grow show-scrollbar-on-hover">
  {data.map((data, index) => {
    return (
      <div className="mt-[1.25rem]" key={index}>
        <h3 className="p-2 text-xs opacity-25 font-[700]">
          {data.date}
        </h3>
        <div className="flex gap-1">
          <ul className="text-[14px] ">
            {data.search.map((term, i) => (
              <div className="flex gap-1">
                <li
                  className={`rounded-lg p-[.5rem] border border-[solid 1px rgba(160,153,153,0.312)] py-[4px] px-[7px] mb-2 whitespace-nowrap text-ellipsis hover:bg-gray-100 opacity-100 grid grid-cols-[50%50%] hover:cursor-pointer w-[290px] ${
                    chatSelected === term.searchId
                      ? "bg-gray-100"
                      : "bg-white"
                  }`}
                  onClick={() => setChatSelected(term.searchId)}
                  key={i}
                >
                  <p className="overflow-hidden whitespace-nowrap text-ellipsis">
                    {term.searchTerm}
                  </p>
                  <p className="text-right text-xs">{data.exactDate}</p>
                </li>
                <div>
                  <button
                    onClick={() => dropdownHandler(term.searchId)}
                    className="relative"
                    ref={refs.setReference}
                  >
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="24"
                      height="24"
                      viewBox="0 0 24 24"
                      fill="gray"
                    >
                      <circle cx="6" cy="12" r="2" />
                      <circle cx="12" cy="12" r="2" />
                      <circle cx="18" cy="12" r="2" />
                    </svg>
                  </button>

                  {dropDownOn === term.searchId && (
                    <div
                      ref={refs.setFloating}
                      style={floatingStyles}
                      className={`h-8 w-32 p-2 gap-3 text-[14px] z-[9999] flex items-center bg-white rounded shadow-lg border border-[rgba(164,164,165,0.3)]`}
                    >
                      <button className="">
                        <FontAwesomeIcon
                          icon={faTrashCan}
                          style={{
                            color: "#808080",
                            opacity: "0.8",
                          }}
                        />
                      </button>
                      <button className="text-[14px] font-medium">
                        Delete
                      </button>
                    </div>
                  )}
                </div>
              </div>
            ))}
          </ul>
        </div>
      </div>
    );
  })}
</div>
<div className="flex pt-[.875rem] gap-2 p-2 items-center">
  <svg
    width="21"
    height="27"
    viewBox="0 0 40 40"
    xmlns="http://www.w3.org/2000/svg"
  >
    {/* Background circle */}
    <circle cx="20" cy="20" r="20" fill="rgba(128, 128, 128, 0.3)" />

    {/* Text with the first letter */}
    <text
      x="50%"
      y="50%"
      textAnchor="middle"
      dominantBaseline="middle"
      fontSize="20"
      fill="black"
      fontFamily="Arial"
    >
      Y
    </text>
  </svg>
  <p className="text-[14px] font-bold">UserName</p>
</div>
); };

export default Sidebar;
the sidebar is rendered inside an app.js and has another component beside it which is the main part
@clarnx
please help me, I need this asap
@noelforte
your help will be appreciated, thanks
@SamO
@luke

@Yusuf Do not create duplicate threads, do not tag multiple people for code assistance.

Original thread:

Netlify’s forums are not for general coding assistance, they’re for help with Netlify’s systems, help with your project code is “out of scope”, see the Scope of Support here, specifically the “Support Limits” at the bottom of the page:

https://www.netlify.com/support-scope/

  1. Base functionality of Netlify’s build and deploy pipeline is supported, but we cannot help you debug any source code used either during build or after deployment. We’ll be willing to help troubleshoot any build failure that you can confirm in our build image when well-configured, and we’ll guide you in debugging the behavior of your site at a very high level.

Some community members may be more willing to help you with project code, but not if you make it difficult for them.

You’ve provided a jumble of code fragments, and a poor explanation of your issue.

If you want help you should provide more relevant detail:

  • A link to your Netlify site
  • A link to your public repository
  • A clear description of the issue you’re facing
  • A screenshot clearly demonstrating the issue
  • Ways you have already tried to fix it yourself

Make it easier for others to help you and they’re more likely to help you.
If you make it hard, and thus time consuming, they’ll ignore your thread because they almost certainly have better things to do.

2 Likes

Hi, thanks for reaching out. I see you are seeking code related support. This is outside the scope of support. I will follow up on the thread nathan linked above. Please make sure not to create duplicate threads in the future as this slows down our response time.

my react popper doesn’t position the floating container properly
this is my code
import React, { useRef, useState } from “react”;
import “tailwindcss/tailwind.css”;
import logo from “./black_logo_only.png”;
import {
faPenToSquare,
faGear,
faTrashCan,
} from “@fortawesome/free-solid-svg-icons”;
import { FontAwesomeIcon } from “@fortawesome/react-fontawesome”;
import sltBg from “./dots.png”;
import accountAvatar from “./account_avatar.png”;
import DropdownPortal from “./DropdownPortal”;
import { useFloating } from “@floating-ui/react-dom”;

const data = [
{
id: 1,
date: “Today”,
search: [
{
searchTerm: “Operations Management ”,
searchId: 1,
},
{ searchTerm: “today’s weather”, searchId: 2 },
],
exactDate: “2024-5-5”,
},
{
id: 2,
date: “Today”,
search: [
{
searchTerm: “Operations Management ”,
searchId: 3,
},
{ searchTerm: “today’s weather”, searchId: 4 },
],
exactDate: “2024-5-5”,
},
{
id: 3,
date: “Today”,
search: [
{
searchTerm: “Operations Management ”,
searchId: 5,
},
{ searchTerm: “today’s weather”, searchId: 6 },
],
exactDate: “2024-5-5”,
},
{
id: 4,
date: “Today”,
search: [
{
searchTerm: “Operations Management ”,
searchId: 7,
},
{ searchTerm: “today’s weather”, searchId: 8 },
],
exactDate: “2024-5-5”,
},
{
id: 5,
date: “Today”,
search: [
{
searchTerm: “Operations Management ”,
searchId: 9,
},
{ searchTerm: “today’s weather”, searchId: 10 },
],
exactDate: “2024-5-5”,
},
{
id: 6,
date: “Today”,
search: [
{
searchTerm: “Operations Management ”,
searchId: 11,
},
{ searchTerm: “today’s weather”, searchId: 12 },
],
exactDate: “2024-5-5”,
},
{
id: 7,
date: “Today”,
search: [
{
searchTerm: “Operations Management ”,
searchId: 13,
},
{ searchTerm: “today’s weather”, searchId: 14 },
],
exactDate: “2024-5-5”,
},
{
id: 8,
date: “Today”,
search: [
{
searchTerm: “Operations Management ”,
searchId: 15,
},
{ searchTerm: “today’s weather”, searchId: 16 },
],
exactDate: “2024-5-5”,
},
{
id: 9,
date: “Today”,
search: [
{
searchTerm: “Operations Management ”,
searchId: 17,
},
{ searchTerm: “today’s weather”, searchId: 18 },
],
exactDate: “2024-5-5”,
},
];
const Sidebar = () => {
const [chatSelected, setChatSelected] = useState(1);
const [dropDownOn, setDropDownOn] = useState(null);
const dropdownHandler = (id) => {
dropDownOn === id ? setDropDownOn(null) : setDropDownOn(id);
};

const { refs, floatingStyles } = useFloating({
placement: “start-end”,
strategy: “absolute”,
});
return (
<>





New Chat

        <button className="text-[15px]">
          <FontAwesomeIcon
            icon={faPenToSquare}
            style={{ color: "#808080", opacity: "0.8" }}
          />
        </button>
      </div>
      <div className="flex grow-[0.5] items-center gap-2 bg-gray-100 bg-opacity-90 rounded-lg px-[7px] py-[4px] hover:bg-gray-200 w-[290px] ">
        <div className="grow">
          <button className="text-[14px] font-medium">New Command</button>
        </div>

        <button className="text-[15px]">
          <FontAwesomeIcon
            icon={faGear}
            style={{ color: "#808080", opacity: "0.8" }}
          />
        </button>
      </div>
      <div className="flex justify-end py-2">
        <select
          className=" appearance-none bg-no-repeat bg-cover bg-opacity-[0.1] bg-right mr-[38px] focus:outline-none text-[13px] px-2"
          style={{
            backgroundImage: `url("${sltBg}")`,
            backgroundSize: "23px",
            width: "100%",
          }}
        >
          <option value="All" selected>
            All
          </option>
          <option value="Commands">Chats</option>
          <option value="Updates">Commands</option>
        </select>
      </div>
    </div>
    <div className="grow show-scrollbar-on-hover">
      {data.map((data, index) => {
        return (
          <div className="mt-[1.25rem]" key={index}>
            <h3 className="p-2 text-xs opacity-25 font-[700]">
              {data.date}
            </h3>
            <div className="flex gap-1">
              <ul className="text-[14px] ">
                {data.search.map((term, i) => (
                  <div className="flex gap-1">
                    <li
                      className={`rounded-lg p-[.5rem] border border-[solid 1px rgba(160,153,153,0.312)] py-[4px] px-[7px] mb-2 whitespace-nowrap text-ellipsis hover:bg-gray-100 opacity-100 grid grid-cols-[50%50%] hover:cursor-pointer w-[290px] ${
                        chatSelected === term.searchId
                          ? "bg-gray-100"
                          : "bg-white"
                      }`}
                      onClick={() => setChatSelected(term.searchId)}
                      key={i}
                    >
                      <p className="overflow-hidden whitespace-nowrap text-ellipsis">
                        {term.searchTerm}
                      </p>
                      <p className="text-right text-xs">{data.exactDate}</p>
                    </li>
                    <div>
                      <button
                        onClick={() => dropdownHandler(term.searchId)}
                        className="relative"
                        ref={refs.setReference}
                      >
                        <svg
                          xmlns="http://www.w3.org/2000/svg"
                          width="24"
                          height="24"
                          viewBox="0 0 24 24"
                          fill="gray"
                        >
                          <circle cx="6" cy="12" r="2" />
                          <circle cx="12" cy="12" r="2" />
                          <circle cx="18" cy="12" r="2" />
                        </svg>
                      </button>

                      {dropDownOn === term.searchId && (
                        <div
                          ref={refs.setFloating}
                          style={floatingStyles}
                          className={`h-8 w-32 p-2 gap-3 text-[14px] z-[9999] flex items-center bg-white rounded shadow-lg border border-[rgba(164,164,165,0.3)]`}
                        >
                          <button className="">
                            <FontAwesomeIcon
                              icon={faTrashCan}
                              style={{
                                color: "#808080",
                                opacity: "0.8",
                              }}
                            />
                          </button>
                          <button className="text-[14px] font-medium">
                            Delete
                          </button>
                        </div>
                      )}
                    </div>
                  </div>
                ))}
              </ul>
            </div>
          </div>
        );
      })}
    </div>
    <div className="flex pt-[.875rem] gap-2 p-2 items-center">
      <svg
        width="21"
        height="27"
        viewBox="0 0 40 40"
        xmlns="http://www.w3.org/2000/svg"
      >
        {/* Background circle */}
        <circle cx="20" cy="20" r="20" fill="rgba(128, 128, 128, 0.3)" />

        {/* Text with the first letter */}
        <text
          x="50%"
          y="50%"
          textAnchor="middle"
          dominantBaseline="middle"
          fontSize="20"
          fill="black"
          fontFamily="Arial"
        >
          Y
        </text>
      </svg>
      <p className="text-[14px] font-bold">UserName</p>
    </div>
  </div>
</>

);
};

export default Sidebar;
the sidebar is rendered inside an app.js and has another component beside it which is the main part