react-datetime going out of screen

[trybotics]

react-datetime going out of screen

[simeg]

Hi @trybotics.

How do you think the component should act in this scenario?

[jsobus-neurosys]

@simeg I think it should open with alignement to the right end of input.

[simeg]

@jsobus-neurosys Any idea on how to implement your proposed solution? Maybe there could be a prop that would decide if it would render on left or right side of the input field, but I don't know how to create a single general solution that would adapt to the screen width.

[jsobus-neurosys]

Yes a prop that decide if it would render on left or right is a good begining :) It can be also handled automatically with some kind of collision detection of the screen size. I found jQuery solution (which we don't like to add) which You can analyze and implement inside component https://css-tricks.com/collision-detection/. There is also thing called http://tether.io/ which is wrapped with https://github.com/souporserious/react-tether that may be used for that problem.

[simeg]

Looks interesting, I didn't know about this :) I'll dig deeper into this later. Thanks.

[uwolfer]

In my case, following CSS helped:

.rdtPicker {
  right: 0;
}

Would it be possible to have a renderDatetimePicker option similar to renderInput? Running into a similar issue and would like to render the datetime picker as a modal that's centered on the screen.

[simeg]

@rurihiiragi You could just use this component in a modal component, no need for an extra prop.

You mean the <Datetime /> component? I only want the datetime picker to be in a model, but the <input> remains as part of a form.

[simeg]

Oh, that makes it a bit more complicated. You want to decouple them visually. That is not possible at the moment using props, but maybe with a bit of CSS magic? Not sure.