# Component background color

**URL:** <https://community.glideapps.com/t/component-background-color/10712>\
**Category:** Feature Requests\
**Created:** [June 12, 2020, 8:28am UTC](https://community.glideapps.com/t/component-background-color/10712 "2020-06-12T08:28:53Z")\
**Posts on this page:** 9\
**Page:** 2

<div class="post-metadata">

**Author:** ![Jen\_NYCP](https://avatars.discourse-cdn.com/v4/letter/j/848f3c/32.png) [@Jen\_NYCP](https://community.glideapps.com/u/Jen_NYCP)\
**Post date:** [October 25, 2020, 8:01pm UTC](https://community.glideapps.com/t/component-background-color/10712/21 "2020-10-25T20:01:38Z")

</div>

Can this work for a component in the middle of a screen?

It’s showing on the builder side, but not the app.

In Builder  
 ![feat.1](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/2X/c/c15e18ac58da7bf6f11fbbdbabd35a0090e06604.png)

In App  
 ![feat.2](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/2X/c/c79f496ac3cb90dc2247a4f0b9a7ad42e4bbc67c.png)

 ![feat.](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/2X/1/1490c486d57a3c3388d7078dc4321607e7475a64.png)

---

<div class="post-metadata">

**Author:** ![Lucas\_Pires](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/lucas_pires/32/64863_2.png) [@Lucas\_Pires](https://community.glideapps.com/u/Lucas_Pires)\
**Post date:** [October 26, 2020, 9:30pm UTC](https://community.glideapps.com/t/component-background-color/10712/22 "2020-10-26T21:30:58Z")

</div>

@Jen_NYCP when you use `position` in `absolute`, in glide editor it doesn’t show it properly unless you put the rich text as the top of the others, to be the first component in the screen.

With this, you gotta also increase your `top` to be in the middle of the screen (for this I suggest you to use `px` and not `%`, because talking about responsability, it will break in some size screens).

But I also test it in another browser with inspection view to be sure will be in the right position with other size screens

---

<div class="post-metadata">

**Author:** ![Jen\_NYCP](https://avatars.discourse-cdn.com/v4/letter/j/848f3c/32.png) [@Jen\_NYCP](https://community.glideapps.com/u/Jen_NYCP)\
**Post date:** [October 27, 2020, 4:06am UTC](https://community.glideapps.com/t/component-background-color/10712/23 "2020-10-27T04:06:55Z")

</div>

Got it! Thank you! It’s lined up correctly now in the app, but not in the builder or the browser view. It would never display the same in all three correct?

---

<div class="post-metadata">

**Author:** ![Lucas\_Pires](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/lucas_pires/32/64863_2.png) [@Lucas\_Pires](https://community.glideapps.com/u/Lucas_Pires)\
**Post date:** [October 27, 2020, 6:29am UTC](https://community.glideapps.com/t/component-background-color/10712/24 "2020-10-27T06:29:52Z")

</div>

No… this only happens in glide editor

---

<div class="post-metadata">

**Author:** ![Jen\_NYCP](https://avatars.discourse-cdn.com/v4/letter/j/848f3c/32.png) [@Jen\_NYCP](https://community.glideapps.com/u/Jen_NYCP)\
**Post date:** [October 27, 2020, 2:27pm UTC](https://community.glideapps.com/t/component-background-color/10712/25 "2020-10-27T14:27:49Z")

</div>

No, as in it should be the same in all three or different?

---

<div class="post-metadata">

**Author:** ![Keith\_Chikumbirike](https://avatars.discourse-cdn.com/v4/letter/k/5daacb/32.png) [@Keith\_Chikumbirike](https://community.glideapps.com/u/Keith_Chikumbirike)\
**Post date:** [October 29, 2020, 11:50am UTC](https://community.glideapps.com/t/component-background-color/10712/27 "2020-10-29T11:50:34Z")

</div>

Thank you so much, tried this in a projects app and worked well for me for most tabs however i have a categories tab with 6 categories and this worked for one of the categories but not for the others…(I mean background for each category)

What could i have done wrong?

---

<div class="post-metadata">

**Author:** ![garrison](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/garrison/32/22059_2.png) [@garrison](https://community.glideapps.com/u/garrison)\
**Post date:** [October 20, 2021, 8:35am UTC](https://community.glideapps.com/t/component-background-color/10712/28 "2021-10-20T08:35:15Z")

</div>

Does anyone know if this on the cards?

I saw a comment stating the Glide is clamping down on custom HTML.

---

<div class="post-metadata">

**Author:** ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)\
**Post date:** [October 20, 2021, 9:06am UTC](https://community.glideapps.com/t/component-background-color/10712/29 "2021-10-20T09:06:55Z")

</div>

> [@garrison](#):
>
> I saw a comment stating the Glide is clamping down on custom HTML.

I wouldn’t say this is true. Well, it’s true for the template store - you won’t get an app accepted into the template store that uses CSS.

But you’re free to use as much custom CSS/HTML as you like (and lots of us do) for your own apps and those you build for customers, it just isn’t officially supported. As a general rule it’s pretty safe, as long as you don’t start relying on unstable class names with your CSS.

---

<div class="post-metadata">

**Author:** ![garrison](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/garrison/32/22059_2.png) [@garrison](https://community.glideapps.com/u/garrison)\
**Post date:** [October 20, 2021, 9:16am UTC](https://community.glideapps.com/t/component-background-color/10712/30 "2021-10-20T09:16:16Z")

</div>

Cheers Darren, but I’m trying to avoid custom CSS/HTML as my mission is to build apps for the template store with non-tech savvy end users in mind.

[Previous page](https://community.glideapps.com/t/component-background-color/10712.md?page=1)
