Numeric Entry Field- Button not moving with margin

Ignition
,
1

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

image

2

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:

.ia_numericEntryFieldComponent__editLink{
	margin-right: 12px;
}

Add or subtract pixels to taste.

1 Like
3

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?

4

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

image

1 Like
5

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

1 Like
6

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!