# Size of DateTimeInput

**URL:** <https://forum.inductiveautomation.com/t/size-of-datetimeinput/80415>\
**Category:** Maker\
**Tags:** perspective\
**Created:** [October 12, 2023, 8:53pm UTC](https://forum.inductiveautomation.com/t/size-of-datetimeinput/80415 "2023-10-12T20:53:01Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![Vidar\_Hetlelid](https://avatars.discourse-cdn.com/v4/letter/v/dfb087/32.png) [@Vidar\_Hetlelid](https://forum.inductiveautomation.com/u/Vidar_Hetlelid)\
**Post date:** [October 12, 2023, 8:53pm UTC](https://forum.inductiveautomation.com/t/size-of-datetimeinput/80415/1 "2023-10-12T20:53:01Z")

</div>

Hi there,

Is it possible to change the size of DateTimeInput component?

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/2/a/2af33a6b89de21d6bd003600eb611f770ef2f203.png)

---

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [October 12, 2023, 9:23pm UTC](https://forum.inductiveautomation.com/t/size-of-datetimeinput/80415/2 "2023-10-12T21:23:26Z")

</div>

This looks like a Perspective question. Add the tag to your question title to make it clear (and to attract the right people).

Change what? The box? The numbers? The arrows? The whole lot?

---

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [October 12, 2023, 9:39pm UTC](https://forum.inductiveautomation.com/t/size-of-datetimeinput/80415/3 "2023-10-12T21:39:11Z")

</div>

You need to modify the CSS associated with the DateTimeInput.

- Launch the view in your browser.
- F12 for Developer Tools.
- Use the inspect button (top left) to select parts of the component.
- Note the CSS window pane and try to find the rules which affect the size of the elements. Click them and press the ↑ and ↓ cursor keys to change the values up and down.
- In Ignition Project Browser, right-click on Perspective Styles and turn on the Advanced Stylesheet.
- Copy and paste the parts of CSS that you need to modify. I found these:

```css
.iaTimePickerInput .timePicker input {
    height: 50px; // <---
    width: 50px; // <---
    text-align: center;
}
.ia_inputField {
    font-size: 1.875rem; // <---
    color: var(--neutral-90);
    border: var(--containerBorder);
    background-color: var(--input);
    padding: 0px 0.5rem;
    border-radius: var(--borderRadiusInput);
}
.iaTimePickerInput .timePicker .separator {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px; // <---
    text-align: center;
    width: 11px;
    height: 32px;
}
.iaTimePickerInput--wrapper button.left, .iaTimePickerInput--wrapper button.right {
    width: 44px; // <---
}

```

- Hit Ctrl-S to save and the changes should apply.  
I've marked the settings that may be of interest to you.

---

<div class="post-metadata">

**Author:** ![Vidar\_Hetlelid](https://avatars.discourse-cdn.com/v4/letter/v/dfb087/32.png) [@Vidar\_Hetlelid](https://forum.inductiveautomation.com/u/Vidar_Hetlelid)\
**Post date:** [October 12, 2023, 9:57pm UTC](https://forum.inductiveautomation.com/t/size-of-datetimeinput/80415/4 "2023-10-12T21:57:07Z")

</div>

Thank you so much! I found the rules for the size as you said. Problem is im running Ignition Maker edition, and it seems like i dont have the advanced stylesheet options? 😕

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/0/9/095d9d5f4681b749d14ef86f661ec395a762e3ce.png)

---

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [October 12, 2023, 10:00pm UTC](https://forum.inductiveautomation.com/t/size-of-datetimeinput/80415/5 "2023-10-12T22:00:47Z")

</div>

You've tagged your question as Ignition instead of Maker. You haven't added the Perspective tag as requested. Why?

Perspective is implied if it's a Maker project as it doesn't support Vision, I think.

---

<div class="post-metadata">

**Author:** ![Vidar\_Hetlelid](https://avatars.discourse-cdn.com/v4/letter/v/dfb087/32.png) [@Vidar\_Hetlelid](https://forum.inductiveautomation.com/u/Vidar_Hetlelid)\
**Post date:** [October 12, 2023, 10:02pm UTC](https://forum.inductiveautomation.com/t/size-of-datetimeinput/80415/6 "2023-10-12T22:02:00Z")

</div>

Sorry. This is my first topic on this forum, i dont know how to do that

---

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [October 12, 2023, 10:06pm UTC](https://forum.inductiveautomation.com/t/size-of-datetimeinput/80415/7 "2023-10-12T22:06:32Z")

</div>

> [@Vidar\_Hetlelid](#):
>
> i dont know how to do that

There's a 🖉` pencil icon beside your post title ...

---

<div class="post-metadata">

**Author:** ![Vidar\_Hetlelid](https://avatars.discourse-cdn.com/v4/letter/v/dfb087/32.png) [@Vidar\_Hetlelid](https://forum.inductiveautomation.com/u/Vidar_Hetlelid)\
**Post date:** [October 12, 2023, 10:07pm UTC](https://forum.inductiveautomation.com/t/size-of-datetimeinput/80415/8 "2023-10-12T22:07:45Z")

</div>

OK, so i fixed that, also i moved it to the maker category. Anyways, so I can not change the size of this object in maker?

---

<div class="post-metadata">

**Author:** ![r123](https://avatars.discourse-cdn.com/v4/letter/r/838e76/32.png) [@r123](https://forum.inductiveautomation.com/u/r123)\
**Post date:** [December 21, 2024, 12:29am UTC](https://forum.inductiveautomation.com/t/size-of-datetimeinput/80415/9 "2024-12-21T00:29:51Z")

</div>

I was able to use the Advanced Stylesheet and can make some things a bit smaller but the overall object is the same height and adds a scroll bar.

With the flex container at 60px the time object still wants 78px for some reason.

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/3/f/3f42280b65dd12268aebcc9fa2320730809d1dcf.png)

```python
/* Direct stylesheet authoring is an advanced feature. Knowledge of CSS required.*/

.iaTimePickerInput .timePicker input {
    height: 22px; // <---
    width: 50px; // <---
    text-align: center;
}
.iaTimePickerInput .ia_inputField {
    font-size: 0.875rem; // <---
    color: var(--neutral-90);
    border: var(--containerBorder);
    background-color: var(--input);
    padding: 0px 0.5rem;
    border-radius: var(--borderRadiusInput);
}
.iaTimePickerInput .timePicker .separator {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px; // <---
    text-align: center;
    width: 11px;
    height: 22px;
}
.iaSelectCommon_select {
    margin: 0;
    border: 0;
    cursor: pointer;
    text-align: left;
    height: 20px; // <---
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 16px;
    padding-left: 5px;
}

```

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [December 24, 2024, 11:22am UTC](https://forum.inductiveautomation.com/t/size-of-datetimeinput/80415/10 "2024-12-24T11:22:45Z")

</div>

Long time later, but you were probably running an older version of Ignition before the adv stylesheet was added

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [December 24, 2024, 11:25am UTC](https://forum.inductiveautomation.com/t/size-of-datetimeinput/80415/11 "2024-12-24T11:25:55Z")

</div>

I'd be looking at the dev tools in the browser at the Styles applied to the components to see what's going on

---

<div class="post-metadata">

**Author:** ![r123](https://avatars.discourse-cdn.com/v4/letter/r/838e76/32.png) [@r123](https://forum.inductiveautomation.com/u/r123)\
**Post date:** [December 24, 2024, 5:23pm UTC](https://forum.inductiveautomation.com/t/size-of-datetimeinput/80415/12 "2024-12-24T17:23:48Z")

</div>

That is how I found what I did find but I could not find anything that affected the entire object, only things inside it.