Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Doesn't work with flexibox? Or table? #67

Open
posel opened this issue Oct 7, 2020 · 1 comment
Open

Doesn't work with flexibox? Or table? #67

posel opened this issue Oct 7, 2020 · 1 comment

Comments

@posel
Copy link

posel commented Oct 7, 2020

Describe the bug

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

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:

image

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
image

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
Copy link
Author

posel commented Oct 7, 2020

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:

obrazek

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:
obrazek
Regret to say, but I return back to the standard browser input element.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant