Force datetime picker to display as modal

I have a project with a start and end date picker right next to each other, since one is at the corner of the screen, it opens in a modal, and the other opens normally

I know this was done as a fix to the datetime picker displays underneath other elements bug, but if this is the workaround then it would be nice to have a way to make them consistent

Sort of a duplicate of Perspective DateTime Picker - Popover direction

@chasondeshotel did you get any solution for this? to avoid modal if component is placed at corner of the screen

1 Like

@Shyam

Typically, if you are getting the modal version, it is due to some containerization. because of the way the component renders itself it will think that the popup cannot be displayed without creating a modal.

If you have this issue, you can either attempt to reconfigure how your layout is setup (maybe there are too many flex boxes trying to achieve a type of layout as an example) or you can give the picker, or its container, a margin left or right in the direction it needs to go.

I am looking for an answer to this as well.

I have 2 date time pickers near the top right of my window. When I select Start Date I get the following.

When I select End Date I get the following:

I prefer the option 2 shown when selecting End Date but I can't seem to find a setting that would reliably make that happen.

If there is a setting for this I would love to know.

Thanks.

Solved it with CSS. Put this in the stylesheet.css.

.ia_componentModal.component-modal-large-viewport {
	left: 50px;
	top: 50px;
	width: 881px;
	height: 1192px;
}