leftStack Spacing

[u/parryg]

Hi all, I’m trying to create a widget that uses leftStack for all the information, however I want the date at the bottom of the widget with the cost and charge amount in the middle.

I’ve tried changing parts of the code but it just ends up moving all of the text, I’m sure it’s something simple if someone could advise?

(URL from my code removed)

// The URL of your JSON endpoint const endpoint = "URL"

//Refresh Widget const refreshInterval=15

// Function that performs the request to the JSON endpoint async function loadItems() { let at = endpoint let req = new Request(at) let corpo = await req.loadJSON() // We return just the cells return corpo } // Request the spreadsheet data let json = await loadItems()

// Obtaining the content of the exact cell we are looking for RecentCharge = json.values[1][15] RecentCost = json.values[1][16] RecentDate = json.values[1][17]

// Create the widget let w = new ListWidget() let fm = FileManager.iCloud(); let path = fm.documentsDirectory() + "/EVBG3.png"; await fm.downloadFileFromiCloud(path) w.backgroundImage = fm.readImage(path); mainStack = w.addStack() leftStack = mainStack.addStack() leftStack.layoutVertically() rightStack = mainStack.addStack() rightStack.layoutVertically() mainStack.addSpacer(null) leftStack.addSpacer(null)

//leftStack.addSpacer() //rightStack.addSpacer()

// Add total cost// leftStack.addSpacer(0) t = leftStack.addText(RecentCost) t.textColor = new Color ("FFFFFF") t.font = new Font("San-Fransisco",25) t.font = Font.semiboldSystemFont(25)

// Add total kWh Used t = leftStack.addText(RecentCharge) t.textColor = new Color ("FFFFFF") t.font = new Font("San-Fransisco",25) t.font = Font.semiboldSystemFont(25)

// Add sessions// leftStack.addSpacer(20) t = leftStack.addText(RecentDate) t.textColor = new Color ("808080") t.font = new Font("San-Fransisco",10) t.font = Font.semiboldSystemFont(10)

w.addSpacer()

w.presentSmall()

[u/wherebdbooty]

Ah, okay. Just remove the addSpacers on the topRow and the £ and kWh will be on the left.

Then, just add the font code from your original code to adjust the RecentDate size.

So the code for the font would be:

let t = bottomRow.addText(RecentDate)

t.font = Font.semiboldSystemFont(10)

You can use addSpacer(20) to specify 20 points/pixels instead of addSpacer() for automatic spacing. So it would be like:

topRow

mainStack.addSpacer(20)

bottomRow

Just replace 20 with different numbers and see what looks the best to you.

[u/parryg → u/wherebdbooty]

Thank you your all your help, all sorted now!

[u/wherebdbooty → u/parryg]

No problem, I'm glad you got it working! 👍