Next.js Discord

Discord Forum

Shadcn dialog doesn't appear on responsive mode (mobile)

Answered
Yellow croaker posted this in #help-forum
Open in Discord
Yellow croakerOP
export function ResumeCreateButton() {
  const [showDeleteAlert, setShowDeleteAlert] = React.useState<boolean>(false);
  const handleCVCreation = async () => {
    try {
      const response = await fetch('/api/resume', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
       },
        body: JSON.stringify({
          title: `Resume`,
        }),
      });
      setIsLoading(false);
      if (!response.ok) {
        return toast({
          title: 'something went wrong',
          description: 'try again',
          variant: 'destructive',
        });
      }
      const resume = await response.json();
      router.refresh();
      router.push(`/resume/${resume.id}`);
    } catch (error) {
      console.error('Error creating CV:', error);
    }
  };
  return (
    <>
      <Dialog open={showDeleteAlert} onOpenChange={setShowDeleteAlert}>
        <DialogTrigger asChild>
          <div className="border-dashed border-2 flex border-green-600 h-full rounded-lg items-center justify-center sm:flex-col hover:shadow-xl transition hover:-translate-y-1 flex-row p-4">
            <Plus className="w-6 h-6 text-green-600" strokeWidth={3} />
            <h2 className="font-semibold text-green-600 sm:mt-2">
              New Note Book
            </h2>
          </div>
        </DialogTrigger>
        <DialogContent
          className={'lg:max-w-screen-lg overflow-y-scroll max-h-screen z-50'}
        >
          <DialogHeader>
            <DialogTitle>Choose resume template</DialogTitle>
            <DialogDescription className="h-28">
              Choose Resume template for your Resume
            </DialogDescription>
          </DialogHeader>
        </DialogContent>
      </Dialog>
    </>
  );
}

So this problem seem to be appearing with both dialog and alertDialog. They work correnctly with desktop view, but i go to mobile view (mozilla) they disappear from the screen. The screen stays blurry as the dialog is still active
Answered by American
did u pass the type correctly?
i try it like this and it's work
View full answer

35 Replies

Yellow croakerOP
const DashBoardPage = async () => {
//... Fetching resumes here
  return (
    <>
      <div className="grainy min-h-screen">
        <div className="max-w-7xl mx-auto p-10">
          {/* ... (your existing code above) ... */}

          {/* Display message if no CVs are available */}
          {userResumes.length === 0 ? (
            <div className="text-center">
              <h2 className="text-xl text-gray-500">
                You haven't created any CVs yet.
              </h2>

              <ResumeCreateButton />
            </div>
          ) : (
            <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
              <ResumeCreateButton />

              {userResumes.map((resume) => {
                return (
                  <Card
                    key={resume.id}
                    className="transition-transform transform hover:-translate-y-1 w-full"
                  >
                    <CardHeader>
                      <CardTitle>{resume.title}</CardTitle>
                      <CardDescription>Last Updated:</CardDescription>
                    </CardHeader>
                    <CardContent></CardContent>
                    <CardFooter className="flex justify-between flex-wrap">
                      <Link href={`/resume/${resume.id}`}>
                        <Button className="bg-blue-600 text-white mb-2 sm:mb-0">
                          Open
                        </Button>
                      </Link>
                      <Button className="bg-gray-500 text-white mb-2 sm:mb-0">
                        Modify
                      </Button>
                      <ResumeDeleteButton resumeId={resume.id} />
                    </CardFooter>
                  </Card>
                );
              })}
            </div>
          )}
        </div>
      </div>
    </>
  );
};

export default DashBoardPage;


This is where the button is used.
Yellow croakerOP
This is what i get in mobile view.
This desktop view. As u see, in mobile view there is no dialog.
American
i'm creating a fresh nextjs project with your code and it's work fine on me.
can i see your layout code? maybe something wrong in there.. or did u edit something on shadcn ui dialog component?
Yellow croakerOP
Sure! THis is my "main" layout.tsx

import './globals.css';
import type { Metadata } from 'next';
import { Inter } from 'next/font/google';

import { getCurrentUser } from './lib/session';
import Navbar from './components/Navbar';
import Footer from './components/Footer';
import { Providers } from './lib/providers';
const inter = Inter({ subsets: ['latin'] });
export const metadata: Metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
};

export default async function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  const session = await getCurrentUser();
  //const session = await getServerSession();
  return (
    <html lang="en">
      <body className={inter.className}>
        <Providers>
          <main className="container w-full max-w-screen-2xl mx-auto px-4 sm:px-6 lg:px-8">
            <Navbar />
            <pre>{JSON.stringify(session)}</pre>
            {children}
            <Footer />
          </main>
        </Providers>
      </body>
    </html>
  );
}
this is my app/dashboard/layout
import React from 'react';

import { getCurrentUser } from '@/lib/session';
import { redirect } from 'next/navigation';

interface DashboardLayoutProps {
  children?: React.ReactNode;
}

export default async function DashboardLayout({
  children,
}: DashboardLayoutProps) {
  const user = await getCurrentUser();

  if (!user) {
    redirect('/api/auth/signin');
  }

  return (
    <div className="min-h-screen bg-gray-100">
      <div className="flex mt-6">

        {/* Sidebar */}
        {/* Main Content */}
        <main className="flex-1 p-6">{children}</main>
      </div>
    </div>
  );
}
@Yellow croaker This is app/dashboard/page.txx <@407872469463072768>
American
hmm nothing wrong on layout too.. it's working fine like before.
@Yellow croaker
@American hmm nothing wrong on layout too.. it's working fine like before. <@309224493509771265>
Yellow croakerOP
Strange... Might it be because im using mozilla?
@Yellow croaker Strange... Might it be because im using mozilla?
American
i don't think so i'm trying 2 other browser on my phone and it's still working..
let's try change DialogContent z-index to 9999 to make sure that the problem wasn't z-index
Yellow croakerOP
Im using tailwindcss and it allows only 50 to z
@Yellow croaker Im using tailwindcss and it allows only 50 to z
American
in tailwind there is arbitary values.. so u can use z-[9999] to make z-index 9999
@American in tailwind there is arbitary values.. so u can use z-[9999] to make z-index 9999
Yellow croakerOP
Hey the z-index worked on mozilla! but for some reason on chrome the way how dialog is showed is quite strange.
mozilla left, it works now with the z indec change, but for somereason in google it doesnt show. And if u look closely the right one(google) u can see that the green button is changed to smaller box after clicking the dialog
American
it was so strange that z-index can modify the size of that button >.<
from what i can estimate that the problem was on z-index... u can look carefully on part where u set z-index and make sure that it didn't override the DialogContent..
and if u don't mind u can share the git repository so i can help u find the problem.
Yellow croakerOP
@American
Sure
https://github.com/nicholsss/CeeVee/tree/feature/ask_user_Resume_template
Its in the ask_user_resume_template branch
@Yellow croaker <@407872469463072768> Sure https://github.com/nicholsss/CeeVee/tree/feature/ask_user_Resume_template Its in the ask_user_resume_template branch
American
thanks for sharing the repository i found the problem.. this line code was the main problem..
Yellow croakerOP
Oh god😀 that was just for debug purpose... thank you alot!
American
this JSON.stringify have a text without space that over your container width.
@Yellow croaker Oh god😀 that was just for debug purpose... thank you alot!
American
your welcome.. 👍
Yellow croakerOP
*
Text in a <pre> element is displayed in a fixed-width font, and the text preserves both spaces and line breaks. The text will be displayed exactly as written in the HTML source code
*
So for some reason The pre tag messes The dialog?
@Yellow croaker * Text in a <pre> element is displayed in a fixed-width font, and the text preserves both spaces and line breaks. The text will be displayed exactly as written in the HTML source code * So for some reason The pre tag messes The dialog?
American
it's make ur container mess up , sry i'm bad at explain a thing hahaha
Yellow croakerOP
Oh and kizuna! Do u Have good idea to problem that im having with My Forms and preview(CVTemplate) Component.

What i want to achieve is to Have live preview from The Forms that user uses to fill their information.

So basically left side has The Forms and right side has The live preview Component that would show The stuff that user Have written to The Forms.

What i Have Been thinking is this:
User fills Form, and when its saved/submitted, then The live preview would fetch The changes and show them on The preview
@American it's make ur container mess up , sry i'm bad at explain a thing hahaha
Yellow croakerOP
DW! I understand what u mean! The pre makes The text to overlow and then it messes The container!
@American if it's me i will take form const(useForm on personalDetailForm) to the parent ( resumeMaker) and pass the form to personalDetailForm as a props.. so i can use the form value to live preview without submitting the form
Yellow croakerOP
Nice thats actually good idea!
So basically i move 
const form = useForm<z.infer<typeof personalSchema>>({
    resolver: zodResolver(personalSchema),
    defaultValues: {
      name: personalInfo?.name || '',
      email: personalInfo?.email || '',
      phone: personalInfo?.phone || '',
      address: personalInfo?.address || '',
    },
  });

This to resumemaker, and then i give it as props to The resumemaker, and then i could also give The Form values to CvTemplate as props so i could read those straight in The live preview😎

Thanks! I'm sadly not at home atm, but Will try this later today!
Yellow croakerOP
@American
How i can give useForm as props for the CvTemplate to have live preview showed from the form data? I have the useForm on the parent component.
I also think that i can ditch the useSWR because i already fetch the resumes earlier
export default function ResumeBuilder({ resume }: ResumeMakerProps) {
  const { data: resumeData } = useSWR('/api/resume');

  const form = useForm<z.infer<typeof personalSchema>>({
    resolver: zodResolver(personalSchema),
    defaultValues: {
      name: resume?.personalInfo?.name || defaultFormValues.name,
      email: resume?.personalInfo?.email || defaultFormValues.email,
      phone: resume?.personalInfo?.phone || defaultFormValues.phone,
      address: resume?.personalInfo?.address || defaultFormValues.address,
    },
  });

  return (
    <div className="grid grid-cols-[1fr,1fr] gap-4 pt-8">
        <div className="mb-2">
         <PersonalDetailForm resume={resume} form={form} />
   </div>
   ...
<div>
  <CvTemplate resume={resume} form={form} />
</div>
        ...


And then in CvTemplate i try to watch the form value name

onst CvTemplate = ({ resume, form }) => {
  const name = form.watch('name');

  console.log('resume', resume.personalInfo);
  const personalInfo = useUserStore((state) => state.user.personalInfo);
  const workExperiences = useUserStore((state) => state.user.workExperiences);
  return (
    <div className="flex flex-col items-center justify-center h-screen bg-gray-100">
      <div className="w-[210mm] h-[297mm] bg-white p-8 shadow-lg">
        <h1 className="text-2xl font-semibold mb-4"> {name}</h1>
        ...


But i keep getting error 
Unhandled Runtime Error

TypeError: form.watch is not a function
@Yellow croaker <@407872469463072768> How i can give useForm as props for the CvTemplate to have live preview showed from the form data? I have the useForm on the parent component. I also think that i can ditch the useSWR because i already fetch the resumes earlier js export default function ResumeBuilder({ resume }: ResumeMakerProps) { const { data: resumeData } = useSWR('/api/resume'); const form = useForm<z.infer<typeof personalSchema>>({ resolver: zodResolver(personalSchema), defaultValues: { name: resume?.personalInfo?.name || defaultFormValues.name, email: resume?.personalInfo?.email || defaultFormValues.email, phone: resume?.personalInfo?.phone || defaultFormValues.phone, address: resume?.personalInfo?.address || defaultFormValues.address, }, }); return ( <div className="grid grid-cols-[1fr,1fr] gap-4 pt-8"> <div className="mb-2"> <PersonalDetailForm resume={resume} form={form} /> </div> ... <div> <CvTemplate resume={resume} form={form} /> </div> ... And then in CvTemplate i try to watch the form value name js onst CvTemplate = ({ resume, form }) => { const name = form.watch('name'); console.log('resume', resume.personalInfo); const personalInfo = useUserStore((state) => state.user.personalInfo); const workExperiences = useUserStore((state) => state.user.workExperiences); return ( <div className="flex flex-col items-center justify-center h-screen bg-gray-100"> <div className="w-[210mm] h-[297mm] bg-white p-8 shadow-lg"> <h1 className="text-2xl font-semibold mb-4"> {name}</h1> ... But i keep getting error Unhandled Runtime Error TypeError: form.watch is not a function
American
did u pass the type correctly?
i try it like this and it's work
Answer
@American did u pass the type correctly? i try it like this and it's work
Yellow croakerOP
Your approach worked thanks! did not expect that typeError would crash the app.

U are a life saver for me👍🏽 I really appreciate your help.
It's marked success now but i got one general question about React hook from behavior.
Because i will be having multiple different forms on the same page

  const form = useForm<z.infer<typeof personalSchema>>({
    resolver: zodResolver(personalSchema),
    defaultValues: {
      name: resume?.personalInfo?.name || defaultFormValues.name,
      email: resume?.personalInfo?.email || defaultFormValues.email,
      phone: resume?.personalInfo?.phone || defaultFormValues.phone,
      address: resume?.personalInfo?.address || defaultFormValues.address,
    },
  });
  return (
    <div className="grid grid-cols-[1fr,1fr] gap-4 pt-8">
      <div>
        <div>{name}</div>
        <h1 className="text-2xl font-bold">Aloita CV tekeminen</h1>
        <p className="mb-6">Täytä tietosi</p>
        <Tabs defaultValue="personalInfo" className="w-[650px]">
          <TabsList className="grid w-full grid-cols-3">
            <TabsTrigger value="personalInfo">personalInfo</TabsTrigger>
            <TabsTrigger value="workExperience">Workexperience</TabsTrigger>
          </TabsList>
          <TabsContent value="personalInfo">
            <div className="mb-2">
              <PersonalDetailForm resume={resume} form={form} />
            </div>
          </TabsContent>
          <TabsContent value="workExperience">
            <div className="mb-2">
              <WorkExperienceInfo resume={resume} />
            </div>
          </TabsContent>
        </Tabs>
      </div>


How i should declare the useforms if i'm gonna need multiple different forms? Do i just make multiple different useForms on separate file. Or is there way to make object like useForm that would have something like this structure:
form: {
personalInfo:{
personalInfo values here
},
workExperience:{
Workexperience values here}
}
@Yellow croaker It's marked success now but i got one general question about React hook from behavior. Because i will be having multiple different forms on the same page js const form = useForm<z.infer<typeof personalSchema>>({ resolver: zodResolver(personalSchema), defaultValues: { name: resume?.personalInfo?.name || defaultFormValues.name, email: resume?.personalInfo?.email || defaultFormValues.email, phone: resume?.personalInfo?.phone || defaultFormValues.phone, address: resume?.personalInfo?.address || defaultFormValues.address, }, }); return ( <div className="grid grid-cols-[1fr,1fr] gap-4 pt-8"> <div> <div>{name}</div> <h1 className="text-2xl font-bold">Aloita CV tekeminen</h1> <p className="mb-6">Täytä tietosi</p> <Tabs defaultValue="personalInfo" className="w-[650px]"> <TabsList className="grid w-full grid-cols-3"> <TabsTrigger value="personalInfo">personalInfo</TabsTrigger> <TabsTrigger value="workExperience">Workexperience</TabsTrigger> </TabsList> <TabsContent value="personalInfo"> <div className="mb-2"> <PersonalDetailForm resume={resume} form={form} /> </div> </TabsContent> <TabsContent value="workExperience"> <div className="mb-2"> <WorkExperienceInfo resume={resume} /> </div> </TabsContent> </Tabs> </div> How i should declare the useforms if i'm gonna need multiple different forms? Do i just make multiple different useForms on separate file. Or is there way to make object like useForm that would have something like this structure: form: { personalInfo:{ personalInfo values here }, workExperience:{ Workexperience values here} }
American
u mean like this?
Yellow croakerOP
Actually yes i think thats it ty👍🏽