Hello,
I’m experiencing a weird issue in my script on XS Max.
On XS Max the top and bottom banners are off center: Screenshot XS Max
With iPhone 7 everything looks fine and the top and bottom banners have the same width is the area in the middle of the widget.
Do you have an idea, how can I fix this issue that the widget looks good on all devices?
Greetings,
thisisevanfox
The affected part of code for the top banner looks like this:
const oTopRow = oWidget.addStack();
await setStackBackground(oTopRow);
oTopRow.cornerRadius = 12;
oTopRow.size = new Size(308, 15);
oTopRow.setPadding(7, 7, 7, 7);
oTopRow.layoutVertically();
const oSpacerStack1 = oTopRow.addStack();
oSpacerStack1.layoutHorizontally();
oSpacerStack1.addSpacer();
const oHeadingStack = oTopRow.addStack();
oHeadingStack.layoutHorizontally();
oHeadingStack.addSpacer();
oHeadingStack.setPadding(7, 7, 7, 7);
const dGameDate = new Date(oGameData.gameDate);
const dLocalDate = dGameDate.toLocaleString([], {
year: "numeric",
month: "2-digit",
day: "numeric",
hour: "2-digit",
minute: "2-digit",
});
const oHeadingText = oHeadingStack.addText(
`${dLocalDate} @ ${oGameData.venue}`
);
}
oHeadingText.font = Font.boldSystemFont(11);
oHeadingText.textColor = getColorForCurrentAppearance();
oHeadingStack.addSpacer();
const oSpacerStack2 = oTopRow.addStack();
oSpacerStack2.layoutHorizontally();
oSpacerStack2.addSpacer();
Full code can be founde here.