Font size and component size not increasing for Perspective 'Date Time Input' component

Font size and component size not increasing for Perspective 'Date Time Input' component. When trying to expand the component, only the total space of the component is increasing but the size and font size of the Date picker itself remains the same with more background. When we have to display the project in a large 4k screen, no matter how many pixels / percentage we give for basis or increase the font size also, the Date picker display will still look small with the same size.

It seems the property doesn't apply when the component is set to mode time...
Even a display: None does nothing, when it properly makes the component disappear when set to date or datetime. Which makes it difficult to do anything...
I'd consider this a bug, one IA will hopefully fix.

You CAN target the component with css though:

Which allows to inject css to modify it.
I'm not sure what properties to set to what values to make it behave like you want, but surely @victordcq can help with that.

Seems like a bugg,
But if you want to size things, with both symbols(arrows) and text, best use transform:scale()

Does not rly work for the dropdowns values tho...

1 Like

Hi Pascal, I am asking out of curiosity.

What exactly do you mean by 'You CAN target the component with CSS though, Which allows to inject css to modify it'.

Can you show any quick example.


If you can find a css selector that indentifies a component, you can use that selector to change its css properties.
You can do that in the css theme file, or inject it in a style class.

For example, here there's a component with a class called iaTimePickerInput.
If you wanted to, say, hide it, you could create a style class, and in one of the fields that allow you to type things (usually backGroundImage or whatever it's called), add a line like this:
} iaTimePickerInput: {display: none;} {

Note the curly brackets at the start and end.

It's a dirty trick, but it can be helpful. It's particularly helpful when you target the actual style class you're editing, so that you can add the style class to a component to apply the injection on it specifically.
Let's say the style class is called foo_style, you could use }psc-foo_style: {property: value;}{, then add that class to a component's style classes to give it that property.
Or, well, used to be helpful, with the new resource added a few days ago, css is more easily accessible and might remove the need for those injection tricks.

1 Like