# Spinner button size

**URL:** <https://forum.inductiveautomation.com/t/spinner-button-size/9354>\
**Category:** Ignition\
**Tags:** vision\
**Created:** [November 19, 2014, 1:58am UTC](https://forum.inductiveautomation.com/t/spinner-button-size/9354 "2014-11-19T01:58:43Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![DavidWisely](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/davidwisely/32/10482_2.png) [@DavidWisely](https://forum.inductiveautomation.com/u/DavidWisely)\
**Post date:** [November 19, 2014, 1:58am UTC](https://forum.inductiveautomation.com/t/spinner-button-size/9354/1 "2014-11-19T01:58:43Z")

</div>

Is there any way to make the buttons on the spinner wider?  
Resizing the spinner only adjusts the button height, but not the width.  
I will be using Ignition in a touch panel and would like wider buttons so they are easier to press for users.

---

<div class="post-metadata">

**Author:** ![KathyApplebaum](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/kathyapplebaum/32/7261_2.png) [@KathyApplebaum](https://forum.inductiveautomation.com/u/KathyApplebaum)\
**Post date:** [November 19, 2014, 5:45pm UTC](https://forum.inductiveautomation.com/t/spinner-button-size/9354/2 "2014-11-19T17:45:08Z")

</div>

Not currently, but it’s on our list of things to do some time in 7.7

---

<div class="post-metadata">

**Author:** ![ashleyautomation](https://avatars.discourse-cdn.com/v4/letter/a/90ced4/32.png) [@ashleyautomation](https://forum.inductiveautomation.com/u/ashleyautomation)\
**Post date:** [April 20, 2016, 2:16pm UTC](https://forum.inductiveautomation.com/t/spinner-button-size/9354/3 "2016-04-20T14:16:53Z")

</div>

Was this ever addressed in 7.7 or 7.8? Is it possible to resize the spinner buttons?

---

<div class="post-metadata">

**Author:** ![CharlieW](https://avatars.discourse-cdn.com/v4/letter/c/a3d4f5/32.png) [@CharlieW](https://forum.inductiveautomation.com/u/CharlieW)\
**Post date:** [May 22, 2017, 11:29pm UTC](https://forum.inductiveautomation.com/t/spinner-button-size/9354/4 "2017-05-22T23:29:03Z")

</div>

Has this been addressed yet? The spinner isn’t very useful on a touch panel without being able to increase the button size.

Thanks!

---

<div class="post-metadata">

**Author:** ![DavidWisely](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/davidwisely/32/10482_2.png) [@DavidWisely](https://forum.inductiveautomation.com/u/DavidWisely)\
**Post date:** [May 23, 2017, 12:13am UTC](https://forum.inductiveautomation.com/t/spinner-button-size/9354/5 "2017-05-23T00:13:11Z")

</div>

I can’t see any way to make them wider in 7.9.2, so probably not yet.

---

<div class="post-metadata">

**Author:** ![chi](https://avatars.discourse-cdn.com/v4/letter/c/0ea827/32.png) [@chi](https://forum.inductiveautomation.com/u/chi)\
**Post date:** [May 25, 2017, 10:33am UTC](https://forum.inductiveautomation.com/t/spinner-button-size/9354/6 "2017-05-25T10:33:56Z")

</div>

If the button size is really important, there is a dirty hack:

Add a custom method ‘setWidth’ with a parameter ‘w’ to your spinner component:

```auto
def setWidth(self, w):
	"""
	Arguments:
		self: A reference to the component instance this method is invoked on. This argument
		  is automatic and should not be specified when invoking this method.
		width: The button width
	# First component of the JSpinner should be the 'up' button
	btn1 = self.getComponent(0)

	# the field 'c' is returned by getPreferredSize() of the button
	c = btn1.getClass()
	sizeField = c.getDeclaredField("c")
	sizeField.setAccessible(1);
	
	# set the new button size. only the width is used, the height is determined by the text editor
	from java.awt import Dimension
	newSize = Dimension(w,w)
	sizeField.set(btn1, newSize)
	self.doLayout()
	self.getComponent(2).doLayout()

```

Call the new method in the spinner’s propertyChange script:

```auto
if event.propertyName in ('editor', 'componentRunning' ):
	# editor: designer preview mode
	# componentRunning: client
	event.source.setWidth(30)

```

In the designer, the width will only be updated when switching to preview node.

---

<div class="post-metadata">

**Author:** ![benjamin.samson](https://avatars.discourse-cdn.com/v4/letter/b/7cd45c/32.png) [@benjamin.samson](https://forum.inductiveautomation.com/u/benjamin.samson)\
**Post date:** [April 17, 2020, 7:09pm UTC](https://forum.inductiveautomation.com/t/spinner-button-size/9354/7 "2020-04-17T19:09:42Z")

</div>

In case someone wants to do that in Ignition 8.  
Here is an updated version of this method to work with Java 11

```auto
def setWidth(self, w):
	"""
	Arguments:
		self: A reference to the component instance this method is invoked on. This argument
		  is automatic and should not be specified when invoking this method.
		width: The button width
    """
	# First component of the JSpinner should be the 'up' button
	btn1 = self.getComponent(0)

	# set the new button size. only the width is used, the height is determined by the text editor
	from java.awt import Dimension
	newSize = Dimension(w,w)

	btn1.setPreferredSize(newSize)
	self.doLayout()
	self.getComponent(2).doLayout()

```

---

<div class="post-metadata">

**Author:** ![jespinmartin1](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/jespinmartin1/32/57175_2.png) [@jespinmartin1](https://forum.inductiveautomation.com/u/jespinmartin1)\
**Post date:** [April 17, 2020, 7:41pm UTC](https://forum.inductiveautomation.com/t/spinner-button-size/9354/8 "2020-04-17T19:41:49Z")

</div>

Nice, I think I can live with that vertical line in there  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/2X/a/a13589fe56403809611aca1992f89f0a945c7c89.png)

---

<div class="post-metadata">

**Author:** ![Alex\_Nechodomu](https://avatars.discourse-cdn.com/v4/letter/a/3be4f8/32.png) [@Alex\_Nechodomu](https://forum.inductiveautomation.com/u/Alex_Nechodomu)\
**Post date:** [November 10, 2023, 2:10pm UTC](https://forum.inductiveautomation.com/t/spinner-button-size/9354/9 "2023-11-10T14:10:59Z")

</div>

I know this post is years old, but is there any update on this functionality? or a better work around? I have used the work around provided by benjamin.samson but as jespinmartin1 pointed out it makes the buttons look odd.

---

<div class="post-metadata">

**Author:** ![justinedwards.jle](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/justinedwards.jle/32/37854_2.png) [@justinedwards.jle](https://forum.inductiveautomation.com/u/justinedwards.jle)\
**Post date:** [November 12, 2023, 11:04am UTC](https://forum.inductiveautomation.com/t/spinner-button-size/9354/10 "2023-11-12T11:04:18Z")

</div>

> [@Alex\_Nechodomu](#):
>
> or a better work around?

The residual line and the rectangle on the spinner tool are not a part of the SynthArrowButtons or the JFormattedTextField. They are actually part of the spinner's painted background. The simple work around is to make the spinner's background transparent. Then, supply the desired background with the rectangle tool. It also looks nice to use the line tool to outline the left side of the button. Simply layer the line and the rectangle underneath the spinner component.

**Here's how it turned out when I performed the procedure in my test environment:**  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/0/6/064186fb31cdd73d971cd26e71db98cd9927ff78.png)

**Ingredients:**  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/6/4/64f1815e3a8762567bcc53b4924b1e4de6745fef.png)  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/6/9/6947263c7adba9be70290f44e37b6bfdb7e44057.png)

---

<div class="post-metadata">

**Author:** ![Alex\_Nechodomu](https://avatars.discourse-cdn.com/v4/letter/a/3be4f8/32.png) [@Alex\_Nechodomu](https://forum.inductiveautomation.com/u/Alex_Nechodomu)\
**Post date:** [December 20, 2023, 6:28pm UTC](https://forum.inductiveautomation.com/t/spinner-button-size/9354/11 "2023-12-20T18:28:51Z")

</div>

Good work around, that worked well for me. It'd be nice to have a feature that to adjust the button size directly but this works.
