Setting row display to none and then to block layout is vertical not horizontal

Adobe XD UXP Plugin API
1

When I set a row display to none and then setting to block the items in the row are no longer positioned horizontally but stacked vertically. Is there another style that needs to be set to set the layout back to horizontal?

row.style.display = "none";
row.style.display = "block"; // items in layout becomes vertical

// creating the row
row = h("label", { class: "row", style: { alignItems:"center" } },
      h("span", { style: { width: labelWidth } }, "Artboards"),
      mainForm.exportRangeInput = h("input", { uxpQuiet: true, placeholder: "", alignItems:"center", 
        style:{ flex: "1" }, title: "",
        onchange(e) { updateArtboardModelAndSave() } }),
      h("button", { uxpVariant: "primary", onclick(e) { resetRangeInput() } }, "Reset")
)
2

More details:

Image of how it looks initially (row.style.display reads "block"):

image
image.png714×28 2.93 KB

After setting value to "none" and then back to "block":

image
image.png715×82 3.29 KB

3

Ah – yeah, so row is implicitly setting display: flex on the label. If you switch from none to flex, it should be fine.

It does seem a bug if row.style.display is initially rendering as block, though, since it should be flex.

1 Like