# Question regarding date input and time layout

**URL:** <https://community.thunkable.com/t/question-regarding-date-input-and-time-layout/1725448>\
**Category:** Questions about Thunkable X\
**Created:** [February 10, 2022, 1:03am UTC](https://community.thunkable.com/t/question-regarding-date-input-and-time-layout/1725448 "2022-02-10T01:03:43Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![sillyalien](https://avatars.discourse-cdn.com/v4/letter/s/bbe5ce/32.png) [@sillyalien](https://community.thunkable.com/u/sillyalien)\
**Post date:** [February 10, 2022, 1:03am UTC](https://community.thunkable.com/t/question-regarding-date-input-and-time-layout/1725448/1 "2022-02-10T01:03:43Z")

</div>

Hi, The date/time components are out of place on my app design when viewing on the simulator. How can I fix the position of the components?

Thanks!

---

<div class="post-metadata">

**Author:** ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)\
**Post date:** [February 10, 2022, 2:00am UTC](https://community.thunkable.com/t/question-regarding-date-input-and-time-layout/1725448/2 "2022-02-10T02:00:58Z")

</div>

Please provide a screenshot or project link. We can’t guess what you’re seeing and what might have caused it without more details.

---

<div class="post-metadata">

**Author:** ![sillyalien](https://avatars.discourse-cdn.com/v4/letter/s/bbe5ce/32.png) [@sillyalien](https://community.thunkable.com/u/sillyalien)\
**Post date:** [February 10, 2022, 6:36pm UTC](https://community.thunkable.com/t/question-regarding-date-input-and-time-layout/1725448/3 "2022-02-10T18:36:54Z")

</div>

Hi,

Here’s a screenshot where I have the data input at the top (you can see the arrow) but I see it at the bottom of the screen when it is not clicked.

**Before Clicking:**

 ![image.png](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/c/e/cedab47e4c320908c949f2dc94717f1195cfb2ea.png)

**After Clicking:**

 ![image.png](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/3/c/3c6257ca74c8619b625648a1daf0e2927c420131.png)

Thanks!

---

<div class="post-metadata">

**Author:** ![jared](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/jared/32/138473_2.png) [@jared](https://community.thunkable.com/u/jared)\
**Post date:** [February 10, 2022, 9:48pm UTC](https://community.thunkable.com/t/question-regarding-date-input-and-time-layout/1725448/4 "2022-02-10T21:48:22Z")

</div>

Can You share a link to an app that demonstrates this behavior?

---

<div class="post-metadata">

**Author:** ![sillyalien](https://avatars.discourse-cdn.com/v4/letter/s/bbe5ce/32.png) [@sillyalien](https://community.thunkable.com/u/sillyalien)\
**Post date:** [February 11, 2022, 6:54am UTC](https://community.thunkable.com/t/question-regarding-date-input-and-time-layout/1725448/5 "2022-02-11T06:54:07Z")

</div>

[https://x.thunkable.com/projectPage/61f4a9e1f566a800118d932e](https://x.thunkable.com/projectPage/61f4a9e1f566a800118d932e)

It’s on Add Notification screen after picking the subject.

---

<div class="post-metadata">

**Author:** ![muneer](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/muneer/32/75210_2.png) [@muneer](https://community.thunkable.com/u/muneer)\
**Post date:** [February 11, 2022, 8:13am UTC](https://community.thunkable.com/t/question-regarding-date-input-and-time-layout/1725448/6 "2022-02-11T08:13:19Z")

</div>

There is an unexpected behavior in the form when **Scrollable** is **ON**. If you switch it **OFF** then components will preserve their places.

@jared your comments on such screen behavior.

---

<div class="post-metadata">

**Author:** ![jared](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/jared/32/138473_2.png) [@jared](https://community.thunkable.com/u/jared)\
**Post date:** [February 11, 2022, 8:26pm UTC](https://community.thunkable.com/t/question-regarding-date-input-and-time-layout/1725448/7 "2022-02-11T20:26:48Z")

</div>

not sure whats happening on web preview, but let’s talk about your schema here. On mobile, i cant click the date input because it’s covered by the list viewer. even though the list is empty, it retains its dimensional properties and doesn’t shrink in height. the date is covered

I would recommend placing your elements in groups that you hide/show. I would hide the list after a choice. has been made and replace it with a label. Make the label look like a drop down like this `Option ▼`

and update option to the selected choice while keeping the down arrow. when the label is clicked, show the list on top of all other components with a white background.

Try placing things in groups like this  
[https://x.thunkable.com/projectPage/6206c400e9020b0010c52053](https://x.thunkable.com/projectPage/6206c400e9020b0010c52053)

I place the selection label and list in a group. i placed that under another group that has all the inputs. group 2 placed just under the bottom of the label boundaries. click the label to show the list. select a list item to show the inputs.

Placing things in groups fixes the positioning for the most part.

---

<div class="post-metadata">

**Author:** ![sillyalien](https://avatars.discourse-cdn.com/v4/letter/s/bbe5ce/32.png) [@sillyalien](https://community.thunkable.com/u/sillyalien)\
**Post date:** [February 18, 2022, 9:15pm UTC](https://community.thunkable.com/t/question-regarding-date-input-and-time-layout/1725448/8 "2022-02-18T21:15:55Z")

</div>

Thank you, this really helped.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/0/f/0f59f292712368bce16ff80133ae10de8a6f27e8.png) [@system](https://community.thunkable.com/u/system)\
**Post date:** [May 19, 2022, 9:16pm UTC](https://community.thunkable.com/t/question-regarding-date-input-and-time-layout/1725448/9 "2022-05-19T21:16:08Z")

</div>

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.
