Overlay not visible on the DOM

karnikkanojia commented 3 months ago

I tried using the library to create a basic onboarding tour on my app. The onborda-overlay element is not visible on my web page, I can't even see it on my DOM when I try inspect element. Even though I see the wrapper div and the onborda-site div. I tried to reproduce it on the basic template of create-next-app.

I followed the basic instruction on the README.md

import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";
import { Onborda, OnbordaProvider, Step } from "onborda";

const inter = Inter({ subsets: ["latin"] });

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

const onbordaSteps: Step[] = [
  {
    icon: <>👋</>,
    title: "Step 1",
    content: <>This is the first step</>,
    selector: "#onborda-step1",
    side: "top",
    showControls: true,
    pointerPadding: 10,
    pointerRadius: 10,
  },
  {
    icon: <>👋</>,
    title: "Step 2",
    content: <>This is the second step</>,
    selector: "#onborda-step2",
    side: "bottom",
    showControls: true,
    pointerPadding: 10,
    pointerRadius: 10,
  },
];

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body className={inter.className}>
        <OnbordaProvider>
          <Onborda steps={onbordaSteps}>
            {children}
          </Onborda>
        </OnbordaProvider>
      </body>
    </html>
  );
}

If I'm doing something wrong can you help me understand this

{
  "name": "onborda",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "next": "14.2.3",
    "onborda": "1.2.2",
    "react": "^18",
    "react-dom": "^18"
  },
  "devDependencies": {
    "typescript": "^5",
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "postcss": "^8",
    "tailwindcss": "^3.4.1",
    "eslint": "^8",
    "eslint-config-next": "14.2.3"
  }
}

Operating System: macOS M1 14.5 Node.js Version: 20.10.0

karnikkanojia commented 2 months ago

I tried to downgrade the package to version 1.2.1, The overlay does become visible but it has some problem of staying with the target element.

not-ani commented 2 months ago

same issue, I am unable to go to interact with the Card at all.

uixmat commented 2 months ago

Hey guys, I'll hop on tonight to see if I can help you guys out. Can you share your test repo's?

not-ani commented 2 months ago

Hi!

I can't share the original project since it's a private repo, but I'm experiencing the same issue on a fresh Next.js install. You can check the issue with this test repository: https://github.com/not-ani/onborda-issue-repo.git. Note that you need to scroll all the way down the page to see the card.

Thank you for your the great work on this library!

uixmat commented 2 weeks ago

This is fixed in the latest version!

uixmat / onborda

Overlay not visible on the DOM #6