Prime Community Forum

Posted: **11 Nov 2020, 17:04**

Hi all,

I have a calendar component within a dialog. When the user opens the calendar, the calendar remains within the dialog and since the dialog is small the calendar is not correcly visualized and cannot be used.

Here the code that is very simple:

Code: Select all

<Dialog header="Header" v-model:visible="displayDialog" >
            <h5>Input1</h5>
            <InputText type="text" v-model="value1" />
            <h5>Input2</h5>
            <Calendar :showIcon="true"></Calendar>
</Dialog>

I would like to open it on top of the dialog nevertheless the dialog is small. I tried to fix it with the z-index, but it does not work. Any advice on how can I solve this?

Thanks a lot!

Posted: **12 Nov 2020, 00:40**

Hi,

Thanks a lot for the sample code block! Please try appendTo="body" on Calendar.

Best Regards,

Posted: **12 Nov 2020, 10:07**

I added appendTo and it works perfectly. Thank you very much!

Posted: **12 Nov 2020, 10:18**

You're welcome!

Best Regards,

Prime Community Forum

Calendar within a dialog

Calendar within a dialog

Re: Calendar within a dialog

[SOLVED] Calendar within a dialog

Re: Calendar within a dialog