Reply To: Display issues, overlapping text and textinput

[Jeremy]

Hi Amelie,

You place your TextInput element named AlterDeutschIn 520px to the right of your Text element named AlterDeutsch, but because the latter is over 520px wide, the former ends up appearing on top of the latter’s last words

I think what you want is to have all three elements (Text, TextInput, Text) belong to same line flow, in a way that if there’s not enough width to print everything on a single line, a second line will be inserted and as much as possible of the remaining content will be placed on that second line, and so on. To do that, all the corresponding HTML elements need to be inline elements inside a span element. You’ll need to use Javascript to move the HTML elements corresponding to the PennController elements appropriately:

// include placeholder span elements inside the Text element (which is itself a span)
newText("AlterDeutsch", "In welchem Alter hast du angefangen, Deutsch zu lernen? <span id='ipt'></span><span id='err'></span>")
    .center()
    .css("font-size", "18px")
    .size(1000,60)
    .bold()
    .print()
,
// add the TextInput to the page but don't show it just yet
newTextInput("AlterDeutschIn")
    .hidden()
    .size (200,20)
    .log()
    .print()
,
// add the error Text element to the page but don't show it just yet
newText("errorAlter","Bitte ausfüllen")
    .color("red")
    .css("font-size","14px")
    .hidden()
    .print()
,
// use a javascript function to replace the placeholder elements with the TextInput and the error Text elements
newFunction( ()=>{
    document.querySelector("#ipt").replaceWith(document.querySelector("textarea.PennController-AlterDeutschIn"));
    document.querySelector("#err").replaceWith(document.querySelector("span.PennController-errorAlter"));
} ).call()
,
// reveal the TextInput element now that it's at the right location
getTextInput("AlterDeutschIn").visible()

Jeremy