# DateTimeInput display issues **URL:** \ **Category:** Ignition Early Access\ **Tags:** perspective\ **Created:** [May 17, 2022, 10:35pm UTC](https://forum.inductiveautomation.com/t/datetimeinput-display-issues/59698 "2022-05-17T22:35:23Z")\ **Posts on this page:** 8\ **Page:** 1
**Author:** ![jpark](https://avatars.discourse-cdn.com/v4/letter/j/a88e57/32.png) [@jpark](https://forum.inductiveautomation.com/u/jpark)\ **Post date:** [May 17, 2022, 10:35pm UTC](https://forum.inductiveautomation.com/t/datetimeinput-display-issues/59698/1 "2022-05-17T22:35:23Z")
I have a datetimeinput in the root of a view. It seems to display properly when selecting a date. ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/9/2/920319a08ff661b291d2b06f37c30074e0795bd4.png) When I put the datetimeinput component inside a flex container, it displays as shown below. ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/6/c/6cb1be1f1949edb2eab59360e6437d25e7a358c4.png) 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 ---
**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\ **Post date:** [May 18, 2022, 9:01am UTC](https://forum.inductiveautomation.com/t/datetimeinput-display-issues/59698/2 "2022-05-18T09:01:11Z")
Does it also happen in browser ? I noticed this happening in designer only, with no issue when used in a browser. ---
**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\ **Post date:** [May 18, 2022, 9:25am UTC](https://forum.inductiveautomation.com/t/datetimeinput-display-issues/59698/3 "2022-05-18T09:25:35Z")
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) ---
**Author:** ![jpark](https://avatars.discourse-cdn.com/v4/letter/j/a88e57/32.png) [@jpark](https://forum.inductiveautomation.com/u/jpark)\ **Post date:** [May 18, 2022, 1:44pm UTC](https://forum.inductiveautomation.com/t/datetimeinput-display-issues/59698/4 "2022-05-18T13:44:32Z")
This also happens in a browser. It doesn’t look like a sizing issue as it happens even at fullscreen. [DateInputIssue.zip](https://forum.inductiveautomation.com/uploads/short-url/zMuDe8SvA1o22Ye1v4udT5s4ZLQ.zip) (9.4 KB) ---
**Author:** ![jpark](https://avatars.discourse-cdn.com/v4/letter/j/a88e57/32.png) [@jpark](https://forum.inductiveautomation.com/u/jpark)\ **Post date:** [May 20, 2022, 10:48pm UTC](https://forum.inductiveautomation.com/t/datetimeinput-display-issues/59698/5 "2022-05-20T22:48:24Z")
@cmallonee Is this something that can get fixed or am I doing something wrong? ---
**Author:** ![cmallonee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cmallonee/32/6416_2.png) [@cmallonee](https://forum.inductiveautomation.com/u/cmallonee)\ **Post date:** [May 21, 2022, 12:24am UTC](https://forum.inductiveautomation.com/t/datetimeinput-display-issues/59698/6 "2022-05-21T00:24:36Z")
@victordcq already explained the issue you’re encountering, as did this thread: [Perspective Odd dateTimeInput Behavior](https://forum.inductiveautomation.com/t/perspective-odd-datetimeinput-behavior/43168) 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. ---
**Author:** ![bmeyers](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/bmeyers/32/37453_2.png) [@bmeyers](https://forum.inductiveautomation.com/u/bmeyers)\ **Post date:** [October 18, 2024, 2:43pm UTC](https://forum.inductiveautomation.com/t/datetimeinput-display-issues/59698/7 "2024-10-18T14:43:18Z")
@cmallonee Is there a way to force all DTI components to open in the modal mode? ---
**Author:** ![bmeyers](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/bmeyers/32/37453_2.png) [@bmeyers](https://forum.inductiveautomation.com/u/bmeyers)\ **Post date:** [October 18, 2024, 6:39pm UTC](https://forum.inductiveautomation.com/t/datetimeinput-display-issues/59698/8 "2024-10-18T18:39:26Z")
I put the following in the stylesheet.css and it appears to make both date time inputs modal. ```python .ia_componentModal.component-modal-large-viewport { left: 50px; top: 50px; width: 881px; height: 1192px; ```