Horizontal centering stacks with addSpacer()

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:

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

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()
1 Like

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

1 Like