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

**URL:** <https://forum.inductiveautomation.com/t/font-size-and-component-size-not-increasing-for-perspective-date-time-input-component/65100>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [October 12, 2022, 6:00am UTC](https://forum.inductiveautomation.com/t/font-size-and-component-size-not-increasing-for-perspective-date-time-input-component/65100 "2022-10-12T06:00:30Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Carolin\_Jacob](https://avatars.discourse-cdn.com/v4/letter/c/96bed5/32.png) [@Carolin\_Jacob](https://forum.inductiveautomation.com/u/Carolin_Jacob)\
**Post date:** [October 12, 2022, 6:00am UTC](https://forum.inductiveautomation.com/t/font-size-and-component-size-not-increasing-for-perspective-date-time-input-component/65100/1 "2022-10-12T06:00:30Z")

</div>

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.

 ![IgnitionForumIssue](https://us1.discourse-cdn.com/inductiveautomation/original/3X/5/b/5bfeb9b7c433588f77eb64761a20a3d9ee398afb.png)

---

<div class="post-metadata">

**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\
**Post date:** [October 12, 2022, 9:56am UTC](https://forum.inductiveautomation.com/t/font-size-and-component-size-not-increasing-for-perspective-date-time-input-component/65100/2 "2022-10-12T09:56:09Z")

</div>

It seems the `inputProps.style` 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:  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/e/a/ea3496eb3ef5214cc3e5f2bbea2b0d639b42f8f7.png)

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.

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [October 12, 2022, 11:17am UTC](https://forum.inductiveautomation.com/t/font-size-and-component-size-not-increasing-for-perspective-date-time-input-component/65100/3 "2022-10-12T11:17:00Z")

</div>

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

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/4/f/4f27fdd5c65af09ab337a23c546b6dd2d6bdafc8.png)  
Does not rly work for the dropdowns values tho...  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/1/a/1a3d8a361c106d5ec968587cc082cd2469a0a4b0.png)

---

<div class="post-metadata">

**Author:** ![vasanth.p](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/vasanth.p/32/38099_2.png) [@vasanth.p](https://forum.inductiveautomation.com/u/vasanth.p)\
**Post date:** [October 13, 2022, 8:05am UTC](https://forum.inductiveautomation.com/t/font-size-and-component-size-not-increasing-for-perspective-date-time-input-component/65100/4 "2022-10-13T08:05:45Z")

</div>

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.

Thanks.

---

<div class="post-metadata">

**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\
**Post date:** [October 13, 2022, 8:16am UTC](https://forum.inductiveautomation.com/t/font-size-and-component-size-not-increasing-for-perspective-date-time-input-component/65100/5 "2022-10-13T08:16:16Z")

</div>

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.
