Size of DateTimeInput

Maker
1

Hi there,

Is it possible to change the size of DateTimeInput component?

image

2

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?

3

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

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:

image

5

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.

6

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

7

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

8

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?

9

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

/* 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;
}