# Numeric Entry Field- Button not moving with margin

**URL:** <https://forum.inductiveautomation.com/t/numeric-entry-field-button-not-moving-with-margin/77685>\
**Category:** Ignition\
**Tags:** ignition81, perspective\
**Created:** [August 10, 2023, 8:11am UTC](https://forum.inductiveautomation.com/t/numeric-entry-field-button-not-moving-with-margin/77685 "2023-08-10T08:11:52Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Hayden\_Watson](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/hayden_watson/32/48792_2.png) [@Hayden\_Watson](https://forum.inductiveautomation.com/u/Hayden_Watson)\
**Post date:** [August 10, 2023, 8:11am UTC](https://forum.inductiveautomation.com/t/numeric-entry-field-button-not-moving-with-margin/77685/1 "2023-08-10T08:11:52Z")

</div>

Hey,  
I'm using a numeric entry field with button and trying to apply a margin on right side of it, but it seems the button desn't move, only the numeric field itself. I'm using version 8.1.30

Is this a bug, or should I put it in a different style?

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/f/6/f6ecc178573795d99d95001e74783ed4f79774c6.png)

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/c/0/c0de2cec460c7ad38b731cfe5c9aacb9cd875c33.png)

---

<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:** [August 10, 2023, 11:53am UTC](https://forum.inductiveautomation.com/t/numeric-entry-field-button-not-moving-with-margin/77685/2 "2023-08-10T11:53:15Z")

</div>

The button has a separate styleclass which you can find using your browser's Development Tools - usually F12 and the select button on the top left.

In Project Browser | Perspective | Styles, right-click and enable Advanced Style Sheet. Add in the following:

```auto
.ia_numericEntryFieldComponent__editLink{
	margin-right: 12px;
}

```

Add or subtract pixels to taste.

---

<div class="post-metadata">

**Author:** ![Hayden\_Watson](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/hayden_watson/32/48792_2.png) [@Hayden\_Watson](https://forum.inductiveautomation.com/u/Hayden_Watson)\
**Post date:** [August 10, 2023, 12:21pm UTC](https://forum.inductiveautomation.com/t/numeric-entry-field-button-not-moving-with-margin/77685/3 "2023-08-10T12:21:12Z")

</div>

For these inputs we need different margins based on where these are being used. Is it possible to bind these to style classes using the advanced syle class.

For example if I make a style class called numericEntryButton\_10px\_Right, can I only change the ones assigned this class?

---

<div class="post-metadata">

**Author:** ![automatisation](https://avatars.discourse-cdn.com/v4/letter/a/94ad74/32.png) [@automatisation](https://forum.inductiveautomation.com/u/automatisation)\
**Post date:** [August 10, 2023, 1:05pm UTC](https://forum.inductiveautomation.com/t/numeric-entry-field-button-not-moving-with-margin/77685/4 "2023-08-10T13:05:22Z")

</div>

You simply have to apply your margin on the containerStyle which is just above the style property

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/e/9/e9dd1f5a54b608693fa57dae24aaa10494ee4836.png)

---

<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:** [August 10, 2023, 1:16pm UTC](https://forum.inductiveautomation.com/t/numeric-entry-field-button-not-moving-with-margin/77685/5 "2023-08-10T13:16:05Z")

</div>

Nice.  
I noticed that `marginRight` exposes the background. `paddingRight` might look better for you.

---

<div class="post-metadata">

**Author:** ![Hayden\_Watson](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/hayden_watson/32/48792_2.png) [@Hayden\_Watson](https://forum.inductiveautomation.com/u/Hayden_Watson)\
**Post date:** [August 10, 2023, 1:17pm UTC](https://forum.inductiveautomation.com/t/numeric-entry-field-button-not-moving-with-margin/77685/6 "2023-08-10T13:17:05Z")

</div>

I applied the style in the marginRight of this style and it seemed to append the margin to the outside of the object and caused some isses in my flex container.

However, using paddingRight in this container style worked perfectly.

Thanks!