Shadcn/ui CommandDialog How can the ui not be vertically centered without changing the original code?

[aboutjquery]

I am using nextjs + shadcn/ui

The current situation is that the keyboard pops up when the CommandDialog is opened on the phone, but the CommandDialog is always centered and blocked by the keyboard. I tried to simply add className or style but failed. It seems that the component does not accept these attributes.

I'd like to simply remove something like top-[50%] data-[state=open]:slide-in-from-top-[48%] so that it uses properties like top-0, how can i do this?

[kimfucious]

Good question, @aboutjquery!

Most CSS solutions have a prop (i.e. centered) which is used to vertically center a modal, and they are not centered by default.

It seems that shadcn/ui defaults to vertically centered with no prop available to control vertical positioning, though it could be there and I just can't see it.

What you can do is something like this:

      <DialogContent className="sm:max-w-md fixed top-[15%]">
...

But it seems like a prop would be more convenient ( I am admittedly lazy).