[RESOLVED] Displaying multiple text boxes with variable content!

Solar2D General Questions/Discussion
#1

Hi all,

I am trying to create a screen where I have lot of content to display. The content is variable and I cannot predict the height the text box will take. 

Is there any way to determine the height of the text box at run time so that accordingly I can assign the X and Y coordinates for the next text box which comes after the first text box?

local text1Options = 

      {

          text = globals.text1,  – this has variable content, can be one line, two or three line

          x    = display.viewableContentWidth * 0.28,

          y    = headery + fieldGapY,   – some variables I have defined.

          width = display.viewableContentWidth * 0.72,

          height = display.viewableContentHeight,  

          font  = native.systemFontBold,   

          fontSize = 14,

          align = “left”

      }  

      local displayText1 = display.newText(  text1Options )

      displayText1:setFillColor( 126/255, 126/255, 126/255)

      displayText1.anchorX = 0

      displayText1.anchorY = 0

      myFirstGroup:insert( displayText1 )

– Second text box

      local text2Options = 

      {

          text = globals.text2,

          x    = 180,

          y    = headery + fieldGapY + 50,   – This where the problem is. How do I assign the ‘Y’ coordinates so that there is no white space in case text is less or this text box moves down in case text is more so that there is no overlap?

          width = 170, 

          fontSize = 12,

          align = “left”

      }  

      local displayText2 = display.newText( text2Options )

      displayText2:setFillColor( 126/255, 126/255, 126/255)

      myFirstGroup:insert( displayText2 )

Thanks for the help.

Nikhil

#2

Hi @nikyan,

I would suggest that you specify a width for the text box, but not a height. This way, the text will flow within the defined width, and the overall height will be whatever (variable depending on how much text). Afterward, you can read the height of this text box (which is effectively just a rendered display object) and use that height along with the position to orient the second text box.

Also, since you won’t know the height until after, you should set the anchorY on the first box to 0 and then align it to a top point. Otherwise it’ll be center-aligned around its overall height, which you probably don’t want.

Best regards,

Brent

#3

Thanks Brent. Solved my problem.

I used text1.height to calculate height of the text box and then used it to define Y coordinates for the next text box.

#4

Hi @nikyan,

I would suggest that you specify a width for the text box, but not a height. This way, the text will flow within the defined width, and the overall height will be whatever (variable depending on how much text). Afterward, you can read the height of this text box (which is effectively just a rendered display object) and use that height along with the position to orient the second text box.

Also, since you won’t know the height until after, you should set the anchorY on the first box to 0 and then align it to a top point. Otherwise it’ll be center-aligned around its overall height, which you probably don’t want.

Best regards,

Brent

#5

Thanks Brent. Solved my problem.

I used text1.height to calculate height of the text box and then used it to define Y coordinates for the next text box.

#6

Yup, should be marked as Solved!

#7

Yup, should be marked as Solved!