# Make component bigger?

**URL:** <https://forum.inductiveautomation.com/t/make-component-bigger/65362>\
**Category:** Ignition\
**Tags:** ignition81, perspective\
**Created:** [October 18, 2022, 7:52pm UTC](https://forum.inductiveautomation.com/t/make-component-bigger/65362 "2022-10-18T19:52:22Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![mjohnson0238](https://avatars.discourse-cdn.com/v4/letter/m/4bbf92/32.png) [@mjohnson0238](https://forum.inductiveautomation.com/u/mjohnson0238)\
**Post date:** [October 18, 2022, 7:52pm UTC](https://forum.inductiveautomation.com/t/make-component-bigger/65362/1 "2022-10-18T19:52:22Z")

</div>

Is there anyway to make this component bigger? I have has some complaints from users saying it a bit small.  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/3/f/3f6659e4efb89527968117b0593a6f62a78e034b.jpeg)

---

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [October 18, 2022, 8:08pm UTC](https://forum.inductiveautomation.com/t/make-component-bigger/65362/2 "2022-10-18T20:08:22Z")

</div>

You seem to have made the component bigger already. It seems you're asking about the Numeric Entry Field popup which appears when the component is set to `mode : button`.

Which elements do you want to scale up? The numeric field _and_ the buttons?

Try injecting the following the following CSS into the component's `props.style.backgroundImage`:

```auto
} 
  ia_inputField {font-size: 2.875rem;} 
  button {height: 60px;}
{

```

This will affect other components on the view.

---

<div class="post-metadata">

**Author:** ![mjohnson0238](https://avatars.discourse-cdn.com/v4/letter/m/4bbf92/32.png) [@mjohnson0238](https://forum.inductiveautomation.com/u/mjohnson0238)\
**Post date:** [October 18, 2022, 8:21pm UTC](https://forum.inductiveautomation.com/t/make-component-bigger/65362/3 "2022-10-18T20:21:46Z")

</div>

Yes I want to scale up both items. I will try the suggestion.

---

<div class="post-metadata">

**Author:** ![mjohnson0238](https://avatars.discourse-cdn.com/v4/letter/m/4bbf92/32.png) [@mjohnson0238](https://forum.inductiveautomation.com/u/mjohnson0238)\
**Post date:** [October 18, 2022, 8:48pm UTC](https://forum.inductiveautomation.com/t/make-component-bigger/65362/4 "2022-10-18T20:48:06Z")

</div>

> [@Transistor](#):
>
> ```auto
>  
> ia_inputField {font-size: 2.875rem;} 
> button {height: 60px;}
> {
> 
> ```

So I tried adding this

```auto
}ia_numericEntryFieldComponent__modal_content {width: 600px;}{

```

as a project styles and a component.props.style backgrouond image and i get no change in the size of the box. what am i missing?

---

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [October 18, 2022, 9:09pm UTC](https://forum.inductiveautomation.com/t/make-component-bigger/65362/5 "2022-10-18T21:09:20Z")

</div>

You need to improve your communications a bit.

1. What were you trying to achieve with that modification?
2. Did you _add_ that (as stated in your post) or did you _substitute_ that for my CSS?

Use your browser _Developer Tools_, choose the inspector, click on the element you want to modify and adjust the CSS properties to get the effect you want. Usually you can select a numeric entry and use the up / down cursor keys to increase / decrease the value. When you've figured out what needs to be adjusted then try and copy that into the CSS injection.

---

<div class="post-metadata">

**Author:** ![mjohnson0238](https://avatars.discourse-cdn.com/v4/letter/m/4bbf92/32.png) [@mjohnson0238](https://forum.inductiveautomation.com/u/mjohnson0238)\
**Post date:** [October 19, 2022, 1:12pm UTC](https://forum.inductiveautomation.com/t/make-component-bigger/65362/6 "2022-10-19T13:12:34Z")

</div>

My mistake, I copied a something else like a dummy. After fooling around with it, I found a few other things I wanted change. Thank you Transistor!