I have a datetimeinput in the root of a view. It seems to display properly when selecting a date.
When I put the datetimeinput component inside a flex container, it displays as shown below.
If I have 2 of them in the same flex container, the first one opens with the black background, but the 2nd one displays normally.
If I shrink the designer screen down, they all display with the black background.
Ignition 8.1.17
Does it also happen in browser ?
I noticed this happening in designer only, with no issue when used in a browser.
I think this only happends when the timepicker popup has no space (so when its on the edges of the screen or the screen is really small)
This also happens in a browser. It doesn’t look like a sizing issue as it happens even at fullscreen.
DateInputIssue.zip (9.4 KB)
@cmallonee Is this something that can get fixed or am I doing something wrong?
@victordcq already explained the issue you’re encountering, as did this thread: Perspective Odd dateTimeInput Behavior
In the example you provided, attempting to open the “regular background” DTI results in an expanded picker which ends up expanding below the originating component and you’ll notice it also extends further to the left than the originating component. The “black background” DTI has no space to the left, and so the expanded picker enters the “modal” mode. If you want to avoid the modal mode, your originating DTI will need to be at least as wide as the picker which will be expanded. The picker is 252px wide, so your DTI must be 252px wide in order to avoid modal mode.
Please note that you’ll also encounter modal mode if your originating DTI is close enough to right edge of the viewport.
@cmallonee Is there a way to force all DTI components to open in the modal mode?
I put the following in the stylesheet.css and it appears to make both date time inputs modal.
.ia_componentModal.component-modal-large-viewport {
left: 50px;
top: 50px;
width: 881px;
height: 1192px;