search

quri / react-bootstrap-datetimepicker

[DEPRECATED] A react.js datetime picker for bootstrap
http://dev.quri.com/react-bootstrap-datetimepicker/
MIT License
365 stars 292 forks source link

Position incorrect with dynamically created date fields #36

Open cbegin opened 9 years ago

cbegin commented 9 years ago

Hi, I have a table of editable data, for which one of the columns is a date field. Using the datetimepicker in a dynamically generated list of components fails to position the calendar popup correctly. It ends up at the top of the page, seemingly irrationally. The component positions fine when in a static section of the page.

cbegin commented 9 years ago

Or maybe not... something else is going on. I have two date fields that are just fine on my form. I add a third, no matter where, and the calendar popup displays erratically.

Only default options are used on the misbehaving DateTimeField. But even if I make a duplicate of one of the working ones, and give it a new ID, it fails.

It's almost as though anything beyond two of these components in a page fails.

cbegin commented 9 years ago

Another update:

It seems that it works fine when placed within a bootstrap row > col-xx-n hierarchy. But without that, say in a table, or simply floating anywhere else (or sharing a column with another control) it does position correctly.

cbegin commented 9 years ago

I managed to get it to work by putting the entire table within a row/col-xx-nn structure. It still has a bit of an issue along the y axis, but at least the x and z are correct now!

scottwhite commented 9 years ago

Can confirm, mine shows up at the "top" position in DateTime.js with top = 40px.

nunogoncalves commented 8 years ago

I think it's the same problem: How can I fix this?

Thanks for the help.

nunogoncalves commented 8 years ago

Ok, I fixed it placing the picker inside a div with a relative position.