Layout - dirty label

Posted on
  • I'm studying the tutorials and I have run into something unexpected.

    This is the code taken from Layout tutorial. I only changed the setLabel text (OneOne11111, TwoTwo22222:

    var Layout = require("Layout");
    var layout = new Layout({
      type: "v",
      c: [{
          type: "txt",
          font: "6x8:2",
          label: "A Test",
          id: "label"
          type: "btn",
          font: "6x8:2",
          label: "One",
          cb: l => setLabel("One11111")
          type: "btn",
          font: "6x8:2",
          label: "Two",
          cb: l => setLabel("Two22222")
    }, {
      btns: [{
        label: "Three",
        cb: l => setLabel("Three")
      lazy: true
    function setLabel(x) {
      layout.label.label = x;

    After the second click the label gets dirty (both on emulator and physical device). What's wrong?

    2 Attachments

    • screenshot (1).png
    • screenshot (2).png
  • Layout precalculates the size of the widget bounding boxes. If you do anything that changes the size of a widget you need to call layout.update() before layout.render().

  • I got it! Now it works like a charm, thank you!

  • You can sometimes use fillx:1 to ensure a label fills all the available width.

    Also sometimes just setting a background color with can help force layout to totally clear the rect if something changes

  • Post a reply
    • Bold
    • Italics
    • Link
    • Image
    • List
    • Quote
    • code
    • Preview

Layout - dirty label

Posted by Avatar for Alessandro @Alessandro