Reply To: Placing elements of unknown width in sequence in a canvas

[Jeremy]

Hi,

Create a container element (eg. a Text element) and set its display style attribute to flex. Then print your elements inside that container element. Also make sure to set the position style attribute of your boxes to relative in order for “word” to be positioned relative to the boxes themselves and not their container (the container Text element):

Template("practice.csv", variable => 
  newTrial("trial_prac",
    newText("container", "").css('display', 'flex').print()
    ,
    newText("Should the word go here ").print(getText("container"))
    ,
    newText("firstbox", " ")
      .css({border:'1px solid #000', width: '4em', position: 'relative'})
      .print(getText("container"))
    ,
    newText(" or here ").print(getText("container"))
    ,
    newText("secondbox", " ")
      .css({border:'1px solid #000', width: '4em', position: 'relative'})
      .print(getText("container"))
    ,
    newText("?").print(getText("container"))
    ,
    newText("word", "word").center().print()
    ,
    newDragDrop("dd", "bungee")
      .log()
      .addDrop( 
        getText("firstbox"),  
        getText("secondbox"), 
      )
      .addDrag(getText("word"))
      .offset('0.5em', '0em', getText("firstbox"), getText("secondbox"))
      .wait()
    ,
    newButton("Ready")
      .css("margin-top", "2em")
      .center()
      .print()
      .wait()
      .remove()
  )
)

Jeremy