Horizontal centering stacks with addSpacer()

Scriptable
,
1

Hello!

Trying to get some elements centered horizontally in a ListWidget. I’ve got a main stack that’s on layoutVertically(), and a few stacks added to that, each is on layoutHorizontally(). Others seem to have solved this by adding addSpacer() to either side of the horizontal elements, but those end up collapsing the content between into ellipses:

IMG_1857
IMG_1857617×592 31.5 KB

Any ideas? Thanks!

Relevant code, for the “3.5 U @ 7:21…” line:

// Main stack
    let mainStack = listWidget.addStack();
    mainStack.layoutVertically();

    // BG stack
    // Code for first horizontal stack removed for clarity; is short, so centers fine.

    // Dose stack
    let doseStack = mainStack.addStack();
    doseStack.layoutHorizontally();
    doseStack.centerAlignContent();

    doseStack.addSpacer();

    const doseInfo = doseStack.addText(ns_data.doseText + ' @ ' + ns_data.doseTimeText);
    doseInfo.textColor = new Color('ffffff');
    doseInfo.font = Font.semiboldSystemFont(14);

    doseStack.addSpacer();
1 Like
2

You can use minimumScaleFactor to shrink down larger text to not use the eclipse.

let widget = new ListWidget()

let text = widget.addText("text")
text.font = Font.regularSystemFont(99)


//Scale down large text to a minimum of half the size
text.minimumScaleFactor = 0.5

widget.presentSmall()
2 Likes
3

Cool, that absolutely solves this enough for my needs. Thanks! :slight_smile:

2 Likes