drawer height change on input focus #8025
Closed
utsav-flex
started this conversation in
General
Replies: 0 comments
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
-
i have created one component using shadcn UI drawer, also i have uploaded file of my code.
but in this code if i try to open the drawer and then i focused on input field then drawer change its height and touch at top edge of mobile screen in real device. also i have uploaded below real device screen shots.
`"use client";
import { useState } from "react";
import {
Drawer,
DrawerContent,
DrawerDescription,
DrawerTitle,
DrawerTrigger,
} from "@/components/ui/drawer";
import { Pencil } from "lucide-react";
export const Example = () => {
const [openCardStyle, setOpenCardStyle] = useState(false);
return (
<DrawerTrigger
onClick={() => setOpenCardStyle(true)}
className="flex items-center gap-2 font-medium bg-black text-sm text-white py-1.5 px-3 rounded-lg z-10 absolute bottom-4 left-1/2 -translate-x-1/2"
>
Edit
New Project
Get started by filling in the information below to create your new
project.
Project name
Description
<textarea rows={6} className="border border-gray-200 bg-white w-full resize-none rounded-lg p-3 pt-2.5 text-gray-900 outline-none focus:ring-2 focus:ring-black/5 focus:ring-offset-0" />
Lorem Ipsum is simply dummy text of the printing and typesetting
industry. Lorem Ipsum has been the industry's standard dummy text
ever since the 1500s, when an unknown printer took a galley of type
and scrambled it to make a type specimen book. It has survived not
only five centuries, but also the leap into electronic typesetting,
remaining essentially unchanged. It was popularised in the 1960s
with the release of Letraset sheets containing Lorem Ipsum passages,
and more recently with desktop publishing software like Aldus
PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply
dummy text of the printing and typesetting industry. Lorem Ipsum has
been the industry's standard dummy text ever since the 1500s, when
an unknown printer took a galley of type and scrambled it to make a
type specimen book. It has survived not only five centuries, but
also the leap into electronic typesetting, remaining essentially
unchanged. It was popularised in the 1960s with the release of
Letraset sheets containing Lorem Ipsum passages, and more recently
with desktop publishing software like Aldus PageMaker including
versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the
printing and typesetting industry. Lorem Ipsum has been the
industry's standard dummy text ever since the 1500s, when an unknown
printer took a galley of type and scrambled it to make a type
specimen book. It has survived not only five centuries, but also the
leap into electronic typesetting, remaining essentially unchanged.
It was popularised in the 1960s with the release of Letraset sheets
containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem
Ipsum.
Submit
);
};`
also i take trial without useState hook, it is working fine, below i have add my commented code screen shot,
comment code: https://prnt.sc/TfeIp0ZXSeW9
real device screen shots
initial state: https://prnt.sc/ag3QgeDRdzOv
while focused on input: https://prnt.sc/N9pXJRod8fPD
Beta Was this translation helpful? Give feedback.
All reactions