Doesn't work with flexibox? Or table?

[posel]

Describe the bug

The calendar is open always on the left side of page:

Picker is opened from the field in the middle of the screen (Planned from or to). When flexibox reposition items, everything remain ... wrong. Here is small width for mobile screens:

Page has structure flexibox > div > table > row > cell > div with div for picker, input items, button

Whataver I do date picker opens always on the left side of the screen

Is there a way how to persuade him to stay upon the the box? Herer are both opens

To Reproduce

I believe that the same structure would make always the same problem:

const elP: DTPickers = { attrtype: attrType } const divCont: HTMLDivElement = this.fhtml.createHTMLel('div', undefined, 'linkFieldDiv') as HTMLDivElement const PickerCont: HTMLDivElement = this.fhtml.createHTMLel('div', undefined, 'linkFieldDiv') as HTMLDivElement const inEl: HTMLInputElement = this.fhtml.createHTMLel('input', Date_${attr.name}, 'linkFieldDiv') as HTMLInputElement const bSelect: HTMLDivElement = this.fhtml.createHTMLel('div', undefined, fieldButton, divCont) as HTMLDivElement bSelect.innerHTML = iconProvider.get('calendarSVG') divCont.appendChild(PickerCont) divCont.appendChild(inEl) divCont.appendChild(bSelect) attr.UIdataElType = 'datetime' attr.UIdataEl = elP lBox.buildEl.lastItem = undefined lBox.buildEl.colItem.appendChild(divCont) // set picket const dtFormat: string = attrType === 'datetime' ? 'dd. MM. yyyy hh:mm' : 'dd. MM. yyyy' if (attrType === 'date' || attrType === 'datetime') { elP.dateP = new DatePicker(PickerCont, { date: new Date(attr.oldValue) input: { format: dtFormat, element: inEl }, showAlways: false, timePicker: attrType === 'datetime', usageStatistics: false, autoClose: true, openers: [bSelect] })

Steps to reproduce the behavior:

Expected behavior

Open under or over the field with the date, not out side

Screenshots

Desktop (please complete the following information):

• Desktop, Chrome and FireFox, latest version,
• latest version of pickers - updated today

  Smartphone (please complete the following information):

  Additional context

[posel]

I have found that if I use a style for wrapper a style tui-datepicker-input tui-datetime-input tui-has-focus (btw I didn't find anywhere that it is necessary) it keep calednar close (over) the date element:

Nevertheless it is even less usable because it does not enlarge the eleement in which the item is. BTW in style there is no any limit for size, but the picker does not adept the box size. It is visible here - both width and height has size open: Regret to say, but I return back to the standard browser input element.