Size of DateTimeInput

Hi there,

Is it possible to change the size of DateTimeInput component?


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?

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:
.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.

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? :confused:


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.

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

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

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?