Usage inside modals about v-calendar HOT 18 CLOSED

I have fixed that issue changing the popper strategy to fixed. Accessing the popover ref we can change the positionFixed data to true.
Example:

onMounted(() => {
  datePickerRef.value.popoverRef.positionFixed = true
})

from v-calendar.

If a parent container has overflow: hidden, the calendar is obviously cut off.

Setting overflow: visible; to parent container became the solution in my case.

from v-calendar.

That is an interesting problem. Vue's component system does pose a little bit of a challenge. I may do some testing with vue-portal to see if I can get things working. If I can, and if it doesn't add too much to the overall size of the package, I may include it as a dependency and add the option to alter the DOM hierarchy to overcome this issue.

from v-calendar.

There is an existing prop on v-date-picker called popoverVisibility for just this purpose. It accepts "hover", "focus", "visible" and "hidden".

There are no events emitted though when the popover appears/disappears. That would be easy to add though.

from v-calendar.

Awesome, let me know if I can help in any way

from v-calendar.

One solution might be to allow the developer to specify a clear margin to apply whenever the popover is open. Then, when the popover is opened by the user, the margin is applied (probably around 200 - 300px. This would effectively force the model to display empty space inline, leaving room for the popover to display. This would probably be a better user experience as well.

from v-calendar.

I think I'm following what you're saying, do you mean that the height of the modal would change when the popover is open? One UX problem this poses for us is that the modal is vertically centered, so changing the modal height would make the inputs move up, potentially making the popover disappear again.

from v-calendar.

I see. Perhaps v-calendar could force popover-visibility to "focus" instead of "hover", which I believe would solve this, but it might still be a little jarring to the user.

from v-calendar.

@nathanreyes Is that already an option? To control what event the popover responds to?

from v-calendar.

It would be nice to be able to control what events trigger the popover to open, also it would be nice to be able to have an event listener for the popover opening/closing. I think that would be a pretty simple way to use the workaround you suggested.

from v-calendar.

Hi @nickforddesign!
Were you able to solve this?
I've got the same issue https://codesandbox.io/s/o5joqz51x5

from v-calendar.

My modal had enough space on top of the datePicker; So I solved the problem temporarily by adding this line to the v-date-picker:

popover-direction="top"

from v-calendar.

@nathanreyes no plans about usage with portal-vue?

from v-calendar.

Sorry to dig that issue up, but anyone has found a solution ? popover-direction="top" doesn't wrk in my case.

from v-calendar.

i had this problem too, my modal need to scroll so i add overflow-y: auto to the parent container, but it seems not working when the parent container have overflow: hidden/auto as well, maybe we can conditinally set overflow parent container to "visible" when the v-calendar is open and back to "auto/hidden" when it close?

from v-calendar.

@nathanreyes 1646f74 there's prop: popoverShowClearMargin but seems it doesn't work.

from v-calendar.

If a parent container has overflow: hidden, the calendar is obviously cut off.

Setting overflow: visible; to parent container became the solution in my case.

For me, the parent container was the .v-popper__inner class.

from v-calendar.

andersonAlmeida solution worked for me!

BTW, popover supports strategy = fixed
https://popper.js.org/docs/v2/constructors/#strategy

If v-calendar's PopoverConfig starts supporting strategy=fixed and pass that to popover, we will have clean solution.

Current PopoverConfig
type PopoverConfig = Partial<{
label: string;
customData: any;
visibility: 'click' | 'hover' | 'hover-focus' | 'focus';
placement: Placement;
hideIndicator: boolean;
isInteractive: boolean;
}>;

Future PopoverConfig
type PopoverConfig = Partial<{
label: string;
customData: any;
visibility: 'click' | 'hover' | 'hover-focus' | 'focus';
placement: Placement;
hideIndicator: boolean;
isInteractive: boolean;
strategy: 'fixed'|'';
}>;

If supported we can define
const popover = ref({
placement: 'top-start',
strategy: 'fixed',
})

<DatePicker
...
:popover="{
placement: 'top-start',
strategy: 'fixed',
}"

        >

from v-calendar.