Calendar popup trapped inside container (cutoff)

[jonnylink]

A pretty common use case would be to have a container or widget of some sort that has the form inside it. Unfortunately, the calendar popup doesn't popup all the way like it should, as seen below.

This actually can't be fixed by adding style because it's part of the scoped style (which becomes inline). Position relative is the source of the trouble in DateRangePicker.vue.

vue-daterange-picker {
    position: relative;
    display: inline-block;
}

If you'd like I can try to fix this and send a PR.

[nkostadinov]

Hi, if you think only this relative position is the trouble you could make a PR, I will merge it.

[nkostadinov]

I cannot remove the relative position because the calendar uses position absolute and this is needed. Are you sure this is not on your side - may be some overflow: hidden.
If not could you provide an example somewhere so I can test and work around this. 10x

[sec0ndhand]

This is a problem for me as well. Other libraries attach to a node somewhere else to the dom rather than the parent. Using popperjs or something like that, this can be achieved. Would this be welcomed in a pull request @nkostadinov ?

[nkostadinov]

I try very hard to keep my dependencies to minimum. I would welcome non dependent PR :) . I dont even use a date/time library. I may try to attach the dropdown to another element though - may be an option would suffice.

[sec0ndhand]

@nkostadinov buefy has a attach-to-body attribute that creates a dom-element on body:

export function createAbsoluteElement(el) {
    const root = document.createElement('div')
    root.style.position = 'absolute'
    root.style.left = '0px'
    root.style.top = '0px'
    const wrapper = document.createElement('div')
    wrapper.appendChild(el)
    el.appendChild(el)
    document.body.appendChild(root)
    return el
}

And they update the position once activated using the updateAppendToBody here, so it's more intensive calculation but this method will 'jailbreak' the datepicker from overflow: auto elements.

[bohnman]

@nkostadinov @sec0ndhand

vue-select has an interesting approach. Like buefy, it has an append-to-body prop. However, vue-select makes no attempt to actually position the "dropdown". Rather, it accepts a calculate-position function as a prop for library users to implement the positioning (eg. with Popper.js).

Link to relevant vue-select documentation and example

[nkostadinov]

@bohnman that's an interesting approach. I'll take a look into it.