Display date and the time in a single label without the label box changing width when the string contents change.
Can someone recommend a label setting to stop the label edge box changing size please.
What have you tried so far?
I can display the date and time in a label, but the effect looks bad when the time changes. The string holding the date and time doesnt change length but the character widths do change, due to the font not being monospaced. As the characters change the physical rendering of the string changes length, and this means the border around the date and time changes size. Looking pretty pedestrian.
Screenshot or video
Here is the label with some placeholder text
Below are 2 rendered screen images, displaying the date and time , the top image is ar 31 seconds, the bottom at 20. The bottom box is much wider than the top one, as the “31” are less wide than “20”
ok Thanks, I suspected that a mono width font would do it.
So are there any fixed width fonts build into the Square SDK ? Can you advise me on which one to use in the IDE/SDK or something I can use in lvgl ? The only fonts I can see are the
I seperated the label into 2 labels, with the left label left aligned and the right label right aligned, but when using a border the same thing happens as before, the left and right box borders change size when the size of the text changes.
This is what I really want to achieve…
How can I create a label whose border stays the same size ? This is for a label containing dynamic text that I change at runtime. So that when the text inside the label changes length, or even if the text length stays the same but the text just changes (when using a default non-fixed width font), the outline box is the same length/width ?
When I create a label with an outline/border, if I change the text inside it, the width of the label changes, and so it looks like the right edge of the border box is jumping around.
To solve the problem, use a monospaced font. Search for “monospaced font download” on Google, then copy the font to the assets folder, and in the font manager panel, you can crate the new font to the project.
If you don’t want to use a monospaced font and you want the outline box not to be inconsistent, you first need to set the box to a fixed width. Currently, the content sets the width, so it varies with the text length.
Create a panel widget and set its width and height to fixed dimensions, not based on content. Then, in the style settings, set the borders and colors. Add a label that you align to the left, this will display the time. Next, add another label that you align to the left as well, this will be for the date. Adjust the x position of this label to where the date should appear. This way, neither the panel nor the texts will jump relative to each other.
