Overlapping buttons

Getting Started Newbie Questions
#1

I have 2 buttons next to each other. Although the text isn’t overlapping, if i click on the ‘prev’ button the next button is pressed.

local previous = widget.newButton( TableConcat(visuals.buttonOptionsPrevious, {onRelease=switchTab}) ) local next = widget.newButton( TableConcat(visuals.buttonOptionsNext, {onRelease=switchTab}) ) otherFile: visualValues.buttonOptions = { fontSize = 30, labelColor = { default={ 254/255, 185/255, 21/255 }, over={ 139/255, 23/255, 7/255 }} } visualValues.buttonOptionsPrevious = TableConcat({x= w/2-40, y=h-20, label= "prev", id="previous"}, visualValues.buttonOptions) visualValues.buttonOptionsNext = TableConcat({x= w/2+40, y=h-20, label= "next", id="next"}, visualValues.buttonOptions)

How could i make sure the button touch area is the same as the text?

#2

make the buttons the same width as the text.

The most straightforward way is: 

  1. Make a text object using the same font and size.  

  2. Measure its width.

  3. Delete the text object.

  4. Make button with that width.

There is no guaranteed way to know width of text in advance.

You can also modify the widget library to make text first then make button that width but this would quite difficult and a lot of work if you are new.

#3

make the buttons the same width as the text.

The most straightforward way is: 

  1. Make a text object using the same font and size.  

  2. Measure its width.

  3. Delete the text object.

  4. Make button with that width.

There is no guaranteed way to know width of text in advance.

You can also modify the widget library to make text first then make button that width but this would quite difficult and a lot of work if you are new.