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;
}
10

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

11

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

12

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