Table not straight in Scriptable Widget


Made a widget to show the top teams in my Euro Cup pool. But as you can see having trouble with my tables. Because the Teams names are of different length it’s causing the next column to go askew. Any suggestions? Here is the code where I have the stacks.


for (let item of text) {
    let fs = 16
    let items = w.addStack()
    let i = items.addText(item[0])
    i.font = Font.mediumMonospacedSystemFont(fs)
    i.textColor = Color.white()
    items.addSpacer()
//adjust the length of team names so the table looks right
    let num = 6
    if (item[1].length < num) {
      let spaces = num - item[1].length
      for (let i = 0; i < spaces; i++) {
      item[1] = item[1] + " "
      }
    }
    i = items.addText(item[1].substring(0, num))
    i.font = Font.mediumMonospacedSystemFont(fs)
    i.textColor = Color.white()
    items.addSpacer()
    let sco = item[2].match(/\d+/)
    i = items.addText(sco[0])
    i.font = Font.mediumMonospacedSystemFont(fs)
    i.textColor = Color.white()
    items.addSpacer()
    let cor = item[3].match(/\d+/)
    i = items.addText(cor[0])
    i.font = Font.mediumMonospacedSystemFont(fs)
    i.textColor = Color.white()
    items.addSpacer()
    i = items.addText(item[4])
    i.font = Font.mediumMonospacedSystemFont(fs)
    i.textColor = Color.white()

There are quite a few topics about aligning content in Scriptable widgets. I think this one is probably the closest to what you have and the discussions on Widget Stacks I think should guide you on how to approach the layout to get the alignment that you want.

Thanks Sylumer. I completely agree with @chrillek. Tables in Widgets are a PITA. I kind of see how it should work so I’ll give it a go.

You probably didn’t wait to post until your image was uploaded. Can you please edit your post and reupload it? Otherwise no one will know what you wanted to say since you haven’t written anything.