# CSS textarea

**URL:** <https://community.glideapps.com/t/css-textarea/67124>\
**Category:** Ask for Help\
**Created:** [October 19, 2023, 4:32pm UTC](https://community.glideapps.com/t/css-textarea/67124 "2023-10-19T16:32:46Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![l3oy8231](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/l3oy8231/32/32303_2.png) [@l3oy8231](https://community.glideapps.com/u/l3oy8231)\
**Post date:** [October 19, 2023, 4:32pm UTC](https://community.glideapps.com/t/css-textarea/67124/1 "2023-10-19T16:32:46Z")

</div>

Can I adjust the placeholder to always be displayed even if there is text in the textarea? Is this possible with some CSS customization?

```auto
.wire-field___StyledTextarea-sc-1nuhqre-13::placeholder {
  text-align: right;
}

```

 ![1697733096286](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/a/c/ac8498b6a12eda461589d43680a096fad13bf468.jpeg)

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [October 19, 2023, 11:55pm UTC](https://community.glideapps.com/t/css-textarea/67124/2 "2023-10-19T23:55:39Z")

</div>

I think the placeholder disappears by default when there’s text inside the area. I would love something like this for showing units though.

---

<div class="post-metadata">

**Author:** ![l3oy8231](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/l3oy8231/32/32303_2.png) [@l3oy8231](https://community.glideapps.com/u/l3oy8231)\
**Post date:** [October 20, 2023, 5:03am UTC](https://community.glideapps.com/t/css-textarea/67124/3 "2023-10-20T05:03:56Z")

</div>

Can you recommend me more?

I want to adjust

```auto
data-test="wire-dropdown-ddtest"] .kAYUKK {
white-space : pre-wrap;
}

```

current  
 ![1697778054397](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/a/8/a851dacae6c26632011532efa851e64061687941.jpeg)

that I want to adjust  
 ![1697778100068](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/d/6/d6eccb92a0d45cef84c5c8488ef873283052250d.jpeg)

in the Dropdown List, but it doesn’t seem to display. Where did I go wrong? Please advise me.

![1697778115573](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/e/1/e196414fb2e95ed09f3e046ecd4f4a27e5f9adcb.jpeg)

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [October 21, 2023, 12:38am UTC](https://community.glideapps.com/t/css-textarea/67124/4 "2023-10-21T00:38:09Z")

</div>

I think it’s the fact that the elements are not generated until you click the dropdown that contributes to the problem. I tried it myself as well with variations of:

```auto
span[class*="wire-dropdown"] {
white-space: pre-wrap;
}

```

But that didn’t work.

---

<div class="post-metadata">

**Author:** ![Flowcode](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/flowcode/32/64316_2.png) [@Flowcode](https://community.glideapps.com/u/Flowcode)\
**Post date:** [October 21, 2023, 8:31am UTC](https://community.glideapps.com/t/css-textarea/67124/5 "2023-10-21T08:31:13Z")

</div>

I like the styling you did already! Is this a custom collection with lots of CSS? 😉

---

<div class="post-metadata">

**Author:** ![l3oy8231](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/l3oy8231/32/32303_2.png) [@l3oy8231](https://community.glideapps.com/u/l3oy8231)\
**Post date:** [October 21, 2023, 9:59am UTC](https://community.glideapps.com/t/css-textarea/67124/6 "2023-10-21T09:59:19Z")

</div>

Not a lot. I’m making my app users have an experience that’s similar to what they normally do.

I don’t know if I’ll succeed. 😆 😅 🤣 😂

![1697881769695](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/b/9/b979a33b979c29b4f35f57f363ab8d394993528a.gif)

![1697881880036](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/5/1/514ebb22dc5eba20941fb231dd311d3d712420f2.gif)

![1697881914327](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/5/3/53427f8cba44b67631cfcf6e4ec778d18978b93f.gif)

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [October 21, 2023, 11:52am UTC](https://community.glideapps.com/t/css-textarea/67124/7 "2023-10-21T11:52:59Z")

</div>

Looks very cool though. What are you using for unit price & amount columns?

---

<div class="post-metadata">

**Author:** ![l3oy8231](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/l3oy8231/32/32303_2.png) [@l3oy8231](https://community.glideapps.com/u/l3oy8231)\
**Post date:** [October 21, 2023, 12:55pm UTC](https://community.glideapps.com/t/css-textarea/67124/8 "2023-10-21T12:55:19Z")

</div>

> [@ThinhDinh](#):
>
> unit price & amount columns

unit price & amount columns I used Hint Components and adjusted the gray background value with CSS.

```auto
[data-testid="wire-container-utest"] .bonGBO {
    padding: 6px 16px;
}

```

To make the gray frame smaller

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [October 21, 2023, 1:34pm UTC](https://community.glideapps.com/t/css-textarea/67124/9 "2023-10-21T13:34:15Z")

</div>

Great one. Does it display well on mobile?

---

<div class="post-metadata">

**Author:** ![l3oy8231](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/l3oy8231/32/32303_2.png) [@l3oy8231](https://community.glideapps.com/u/l3oy8231)\
**Post date:** [October 21, 2023, 2:34pm UTC](https://community.glideapps.com/t/css-textarea/67124/10 "2023-10-21T14:34:09Z")

</div>

Mobile phone cannot be displayed at all. By adjusting this CSS, I will set it to work only for DeviceType that is Windows only. 😭 😭

---

<div class="post-metadata">

**Author:** ![Flowcode](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/flowcode/32/64316_2.png) [@Flowcode](https://community.glideapps.com/u/Flowcode)\
**Post date:** [October 25, 2023, 8:00am UTC](https://community.glideapps.com/t/css-textarea/67124/11 "2023-10-25T08:00:22Z")

</div>

Very nice indeed! We are using our own invoice app here but after seeing your example, I think I need to upgrade my layout 😉

Well done!