# App Lab Text Area

**URL:** <https://forum.code.org/t/app-lab-text-area/33450>\
**Category:** Website and Tools Questions\
**Tags:** applab\
**Created:** [October 2, 2020, 12:58pm UTC](https://forum.code.org/t/app-lab-text-area/33450 "2020-10-02T12:58:03Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![echappell](https://avatars.discourse-cdn.com/v4/letter/e/a6a055/32.png) [@echappell](https://forum.code.org/u/echappell)\
**Post date:** [October 2, 2020, 12:58pm UTC](https://forum.code.org/t/app-lab-text-area/33450/1 "2020-10-02T12:58:03Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![frank\_w\_lee](https://sea2.discourse-cdn.com/flex016/user_avatar/forum.code.org/frank_w_lee/32/4895_2.png) [@frank\_w\_lee](https://forum.code.org/u/frank_w_lee)\
**Post date:** [October 4, 2020, 6:59am UTC](https://forum.code.org/t/app-lab-text-area/33450/2 "2020-10-04T06:59:49Z")

</div>

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](https://us1.discourse-cdn.com/flex016/uploads/codeorgforum/original/2X/5/57e333186d5378eb0303efc19daf625985ad8cfb.png)

---

<div class="post-metadata">

**Author:** ![echappell](https://avatars.discourse-cdn.com/v4/letter/e/a6a055/32.png) [@echappell](https://forum.code.org/u/echappell)\
**Post date:** [October 4, 2020, 7:15pm UTC](https://forum.code.org/t/app-lab-text-area/33450/3 "2020-10-04T19:15:07Z")

</div>

?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

---

<div class="post-metadata">

**Author:** ![madeline\_r\_burton](https://sea2.discourse-cdn.com/flex016/user_avatar/forum.code.org/madeline_r_burton/32/5037_2.png) [@madeline\_r\_burton](https://forum.code.org/u/madeline_r_burton)\
**Post date:** [October 5, 2020, 3:14pm UTC](https://forum.code.org/t/app-lab-text-area/33450/4 "2020-10-05T15:14:13Z")

</div>

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](https://us1.discourse-cdn.com/flex016/uploads/codeorgforum/original/2X/e/ecbfc7391a290a30a23a635b79ac0fc5482482f0.png)

---

<div class="post-metadata">

**Author:** ![echappell](https://avatars.discourse-cdn.com/v4/letter/e/a6a055/32.png) [@echappell](https://forum.code.org/u/echappell)\
**Post date:** [October 5, 2020, 3:27pm UTC](https://forum.code.org/t/app-lab-text-area/33450/5 "2020-10-05T15:27:09Z")

</div>

?Oh, that’s perfect! Thank you!

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

---

<div class="post-metadata">

**Author:** ![frank\_w\_lee](https://sea2.discourse-cdn.com/flex016/user_avatar/forum.code.org/frank_w_lee/32/4895_2.png) [@frank\_w\_lee](https://forum.code.org/u/frank_w_lee)\
**Post date:** [October 11, 2020, 5:22am UTC](https://forum.code.org/t/app-lab-text-area/33450/6 "2020-10-11T05:22:06Z")

</div>

Ooh, nice. I didn’t know that one. 🙂

---

<div class="post-metadata">

**Author:** ![kock](https://sea2.discourse-cdn.com/flex016/user_avatar/forum.code.org/kock/32/6434_2.png) [@kock](https://forum.code.org/u/kock)\
**Post date:** [April 7, 2022, 1:24pm UTC](https://forum.code.org/t/app-lab-text-area/33450/7 "2022-04-07T13:24:44Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![bhatnagars](https://sea2.discourse-cdn.com/flex016/user_avatar/forum.code.org/bhatnagars/32/4919_2.png) [@bhatnagars](https://forum.code.org/u/bhatnagars)\
**Post date:** [April 7, 2022, 4:25pm UTC](https://forum.code.org/t/app-lab-text-area/33450/8 "2022-04-07T16:25:31Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![letti42](https://avatars.discourse-cdn.com/v4/letter/l/7ea924/32.png) [@letti42](https://forum.code.org/u/letti42)\
**Post date:** [April 10, 2022, 7:41pm UTC](https://forum.code.org/t/app-lab-text-area/33450/9 "2022-04-10T19:41:17Z")

</div>

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

```auto
setStyle("textareaId","white-space: pre; overflow-wrap: normal;");

```

---

<div class="post-metadata">

**Author:** ![kock](https://sea2.discourse-cdn.com/flex016/user_avatar/forum.code.org/kock/32/6434_2.png) [@kock](https://forum.code.org/u/kock)\
**Post date:** [April 14, 2022, 5:08pm UTC](https://forum.code.org/t/app-lab-text-area/33450/10 "2022-04-14T17:08:35Z")

</div>

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](https://us1.discourse-cdn.com/flex016/uploads/codeorgforum/original/2X/8/851f7dae19961d0433cdd88948c2b294b46e5633.png)

---

<div class="post-metadata">

**Author:** ![mkmietowicz](https://sea2.discourse-cdn.com/flex016/user_avatar/forum.code.org/mkmietowicz/32/6322_2.png) [@mkmietowicz](https://forum.code.org/u/mkmietowicz)\
**Post date:** [April 16, 2022, 1:49am UTC](https://forum.code.org/t/app-lab-text-area/33450/11 "2022-04-16T01:49:44Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![letti42](https://avatars.discourse-cdn.com/v4/letter/l/7ea924/32.png) [@letti42](https://forum.code.org/u/letti42)\
**Post date:** [April 16, 2022, 4:30am UTC](https://forum.code.org/t/app-lab-text-area/33450/12 "2022-04-16T04:30:45Z")

</div>

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](https://stackoverflow.com/questions/657795/how-to-remove-word-wrap-from-textarea)** and look for the before-mentioned keyword **white-space**.

---

<div class="post-metadata">

**Author:** ![greiber](https://sea2.discourse-cdn.com/flex016/user_avatar/forum.code.org/greiber/32/6369_2.png) [@greiber](https://forum.code.org/u/greiber)\
**Post date:** [February 7, 2023, 4:59am UTC](https://forum.code.org/t/app-lab-text-area/33450/13 "2023-02-07T04:59:49Z")

</div>

@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:

```auto
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");

```