App Lab Text Area

CS Principles Website and Tools Questions
1

If a student wants to include a larger amount of text on a screen, I have been telling them to use Text Area in order to limit the amount showing and allow the user to scroll to read. However, when the app is shared, users are still able to type in the text area and change the text as if it was an Input Text. Does anyone have a solution for this?

2

Hi @echappell,

Text Input and Text Area are both intended as inputs, like fields in a form.

It sounds like that’s not what you’re looking for - instead, you just want text to appear on the screen, without allowing the user to edit the text, right?

If that’s the case, the design element you’re looking for is “Label”. Students can type as much as they want and resize the box.

image
image522×1074 53.5 KB

1 Like
3

?Thank you for your help! Does the label allow for any amount of text (i.e. If it excedes the size of the label, it will allow the user to scroll through it.), or does the text just have to get smaller with more text?

Elizabeth A. Chappell
Computer Science & PLTW
Coach FLL Robotics Team
Groton Middle School

4

Hi Elizabeth,

You can also use the text area (instead of Label) to limit text and have a scroll bar as you have been doing! Your students just have to do one more step to make the text area ‘read only’ so users cannot write in that space. In Design mode, they can click on the text box, then scroll down in the workspace. They will see the ‘read only’ checkbox there, and can toggle it on or off depending on how they want the user to interact.

image
image636×978 34.7 KB

2 Likes
5

?Oh, that’s perfect! Thank you!

Elizabeth A. Chappell
Computer Science & PLTW
Coach FLL Robotics Team
Groton Middle School

6

Ooh, nice. I didn’t know that one. :slight_smile:

7

This is great, but I want horizontal scrolling too! How would that be accomplished?

8

I don’t think that is possible since the text automatically wraps around.

9

If you for some reason wanted just horizontal scrolling, you can use this:

setStyle("textareaId","white-space: pre; overflow-wrap: normal;");
1 Like
10

This gives me the horizontal scroll bar. Thank you. However when scrolling right, the content of the textarea is blanked out (except the first line).

2022-04-14_12-04-32
2022-04-14_12-04-32310×520 19.2 KB

11

Hi @kock,

Can you please include a link to the project so we can look at what might be causing this isssue?

Thanks,
Michael K.

12

That’s weird. If you posted the link to the project it may help.
I suppose it has something to do with the white-space property in the setStyle(), but I haven’t used that style property in the past.
If you want to perform more research I suggest going to this StackOverflow question and look for the before-mentioned keyword white-space.

13

@letti42 has what I think is the right approach. I use textLabel() to create almost all of my elements and then use setParent() and setStyle() to make them look however I want.

something like this:

textLabel("box","");
setStyle("box",
   "overflow:auto;" +
   "position:absolute;" +
   "top:0; left:0; right:0; bottom:0;" +
   "padding:0; margin:0;"
);

textLabel("stuff","?");
setStyle("stuff",
   "height:600px; width:436px;" +
   "background:url(https://upload.wikimedia.org/wikipedia/en/b/bb/General_Iroh.jpg);"
);

setParent("stuff","box");