The default button width varies depending on what theme you’re using. The iOS7+ theme for instance, the button’s default width is 180.
Here is the code I worked out based on what you started:
for dispLine=0,9 do rowbg = display.newRect(cx,cy-165+(dispLine)\*38, fullw-40, 36) rowbg:setFillColor( .5, .3, .3 ) textItem = item[currentDisplayFrom+dispLine] buttonNm="btn"..(5+dispLine) local buttonItemName = widget.newButton( { id = buttonNm, label = textItem, font = native.systemFont, fontSize = 18, labelAlign = "left", --strokeColor = { default={ 1, 1, 1 }, over={ 0.4, 0.1, 0.2 } }, --strokeWidth = 4, --labelXOffset = -80, shape = "rect", height = 36, width = 230, labelColor = { default={ 1, 1, 0 }, over={ 0, 1, 1, 0.5 } }, fillColor = { default={ 1, 1, 1, 1 }, over={ 1, 0, 0, 0 } }, onEvent = handleButtonItemEvent } ) selectedItem = textItem buttonItemName.x = cx - 20 buttonItemName.y = cy -165+dispLine\*38 labelSection = (section[currentDisplayFrom+dispLine]) local buttonSectionName = widget.newButton( { id = buttonSection, label = labelSection, font = native.systemFont, fontSize = 18, labelAlign = "right", shape = "rect", width = 40, height = 36, --labelXOffset = 80, labelColor = { default={ 1, 1, 1 }, over={ 0, 1, 1, 0.5 } }, fillColor = { default={ 1, 0.9, 0.5, 0.7 }, over={ 1, 0.9, 0.7, 1 }}, onEvent = handleButtonSectionEvent } ) buttonSectionName.x = cx + 120 buttonSectionName.y = cy -165+dispLine\*38 --]] end
Basically, the first thing I did was comment out your offsets and added the “shape” option so that I could see the background of the button (the invisible part). When I did this, you could see that with your 80 point offsets, it was actually shifting the backgrounds of the buttons in a bad way. I also commented out the stroke on the left button because it visually made the left button taller than the right button and that added to the visual confusion.
To get this to look right, I then set physical widths for each button (230 point for the left, 40 point for the right) and set a physical height,j just for fun. Then I figured out the value for the x location for each button. You can see from the new screenshot how the new buttons are positioned. To hide the background, simply take the “shape” option out.
You can adjust the button widths if you want the right button to be a bit wider to make it an easier touch target or if those numbers can get quite large. Just take away some width of the left button and adjust the X value of the buttons.
Rob