Formatting text on buttons and in labels

[ag2...@gmail.com]

I'm using the Pura Vida quiz as my frameworks for multiple choice quiz and functionally, it is working great. Text formatting is my next concern and I have two issues:

1) Some of my multiple choice "answers" are actually short sentences.  How can I "wrap" a short sentence on two lines on a button?  I know that "TextBox" will support MultiLine, but can I do this with a button somehow?  Right now, my buttons will run off the screen if there are too many words.  (The buttons are the same color as the background, so the user appears to just click on the text of the right answer.  So a button that is shaped taller or different than the others doesn't really affect the look and feel of the quiz.)

2) Text fed from lists are dumped into labels.  Sometimes this text is cut off in the right-hand margins (1/2 inch) of my screen (Galaxy S4), but sometimes text is legibly all the way to the edge.  Text usually wraps properly when the passage is a short paragraph, but the right-hand side of the screen behaves oddly.  It is almost like there's a white box that covers up the right side of the screen at times, but this symptom comes and goes.  It doesn't happen with every question in the quiz, just some of them.  Very odd and inconsistent.

Should I try to change this from a label to a TextBox?  Right now, I'm just following the Pura Vida Quiz format (with my own additional features here and there), but I'm willing to make changes and having fun.

Everyone in this forum has been super helpful.  I really appreciate the crowd here.  Great group of folks.

[SteveJG]

add the control character  \n  (  the  slash and the character n)     at the point you want to divide the text.

to get:

I wish this 

would work

type   I wish this \n would work

Experiment.  It won't solve all ur issues but will work for some.

Regards,

Steve

[Stephen Zipprich]

2) Text fed from lists are dumped into labels.  Sometimes this text is cut off in the right-hand margins (1/2 inch) of my screen (Galaxy S4), but sometimes text is legibly all the way to the edge.  Text usually wraps properly when the passage is a short paragraph, but the right-hand side of the screen behaves oddly.  It is almost like there's a white box that covers up the right side of the screen at times, but this symptom comes and goes.  It doesn't happen with every question in the quiz, just some of them.  Very odd and inconsistent.

Try setting the width of the label to fill parent and see if it still happens.

[ag2...@gmail.com]

Hmmm.  I'm experimenting.  But I don't want to configure a hard and fast line break at a particular point because I want my quiz to work on various platform sizes and dimensions such as a phone or a tablet.

[ag2...@gmail.com]

"fill parent" worked perfectly for the labels.  Thank you!  I'm still struggling with buttons.  I have tried automatic and fill parent.  Some of the text on my buttons are actual, short sentences. I want these to automatically wrap at the edge of the screen.  My buttons are in a table arrangement.  I have played with setting the table and the buttons to auto, fill and combinations of the two.  The text simply runs off the screen.  I can not seem to get them to "wrap" to another line at the edge of the screen.

[Stephen Zipprich]

Have you tried using horizontal and vertical arrangements instead of table arrangements?  Sometimes the table arrangements don't work as well.

[ag2...@gmail.com]

I have not tried that yet.  I used the table arrangement because I used the first column as a placeholder for A), B), C), and D).  Then I used the second column for my buttons (which are randomized possible answers).

However, I might try to use a table arrangement for the A),B),C), and D) and then right next to it on the right side perhaps use a vertical arrangement for the buttons.  I'll play around with it.

For the time being, I was able to simply declare the button widths to be 275 pixels.  This works on my SG4 for now, but I will need to test on tablets.  It did let me know that when I set a fixed width, it DOES wrap the text on the button.  This is what I wanted.  Now I just need it to dynamically adapt to the dimensions of the platform.  If it could do this relatively, it would be great.

Here's a related question.  How can I set small margins all the way around the screen?  Right now, text seems to run right up to the edge and appear crowded.

[Taifun]

How can I set small margins all the way around the screen?

generally: use labels as spacer

let's assume, all your components are inside a vertical screen arrangement

now just add a label (height = 5px) above the arrangement

then add a horziontal arrangement, add a label (width = 5px) inside, then move your vertical arraqngement with all your components into the horizontal arrangement and add another label (height = 5px)

Taifun

 

---

Trying to push the limits of App Inventor! Snippets and Tutorials from Pura Vida Apps by Taifun.