# And Basic css Table tricks?

**URL:** <https://community.glideapps.com/t/and-basic-css-table-tricks/24424>\
**Category:** Ask for Help\
**Created:** [March 18, 2021, 1:32am UTC](https://community.glideapps.com/t/and-basic-css-table-tricks/24424 "2021-03-18T01:32:49Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![abe.sherman](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/abe.sherman/32/11260_2.png) [@abe.sherman](https://community.glideapps.com/u/abe.sherman)\
**Post date:** [March 18, 2021, 1:32am UTC](https://community.glideapps.com/t/and-basic-css-table-tricks/24424/1 "2021-03-18T01:32:49Z")

</div>

![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/4/4/44584528d1b8b2ecc4c394189fce55fdadd98768.png)

Is there any CSS tricks to change the way my info brakes? Like extend the brake, or have 2 lines? i am only going to use this for 1 Basic Table where a few tables exist already.

Its a very bad read for my users. and really want to give the full info.

---

<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:** [March 18, 2021, 1:49am UTC](https://community.glideapps.com/t/and-basic-css-table-tricks/24424/2 "2021-03-18T01:49:19Z")

</div>

```
<pre><span><style>
[data-test="app-simple-table"] .sts-label{
white-space: break-spaces;
}

```

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/2/3/2367e96220b6c934fd2f6b93d3dc2f87ef82b260.png)

---

<div class="post-metadata">

**Author:** ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)\
**Post date:** [March 18, 2021, 1:49am UTC](https://community.glideapps.com/t/and-basic-css-table-tricks/24424/3 "2021-03-18T01:49:57Z")

</div>

Try this:

```auto
<pre><span><style>
[data-test="app-st-item-label"] {
white-space: break-spaces !important;
}

.sts-row {
    height: auto !important;
    padding: 10px 0;
}

```

 ![Screen Shot 2021-03-17 at 9.49.39 PM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/1/1/11c24934e8451cf73a0caeaedc2afe17debf10b3.jpeg)

@ThinhDinh beat me to the CSS…but include the `.sts-row` class is you have lots of text.

---

<div class="post-metadata">

**Author:** ![abe.sherman](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/abe.sherman/32/11260_2.png) [@abe.sherman](https://community.glideapps.com/u/abe.sherman)\
**Post date:** [March 18, 2021, 1:51am UTC](https://community.glideapps.com/t/and-basic-css-table-tricks/24424/4 "2021-03-18T01:51:00Z")

</div>

2 replies same time fast. wow thank you let me give both a shot.

---

<div class="post-metadata">

**Author:** ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)\
**Post date:** [March 18, 2021, 1:52am UTC](https://community.glideapps.com/t/and-basic-css-table-tricks/24424/5 "2021-03-18T01:52:07Z")

</div>

> [@ThinhDinh](#):
>
> ```auto
> <pre><span><style>
> [data-test="app-simple-table"] .sts-label{
> white-space: break-spaces;
> }
> 
> ```

otherwise this:  
 ![Screen Shot 2021-03-17 at 9.51.44 PM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/a/6/a63ac40e923518a611b0059f7b45ebf297143327.png)

---

<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:** [March 18, 2021, 1:52am UTC](https://community.glideapps.com/t/and-basic-css-table-tricks/24424/6 "2021-03-18T01:52:24Z")

</div>

Good catch bro!

---

<div class="post-metadata">

**Author:** ![abe.sherman](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/abe.sherman/32/11260_2.png) [@abe.sherman](https://community.glideapps.com/u/abe.sherman)\
**Post date:** [March 18, 2021, 1:53am UTC](https://community.glideapps.com/t/and-basic-css-table-tricks/24424/7 "2021-03-18T01:53:36Z")

</div>

> [@Robert\_Petitto](#):
>
> ```auto
> <pre><span><style>
> [data-test="app-st-item-label"] {
> white-space: break-spaces !important;
> }
> 
> .sts-row {
> height: auto !important;
> padding: 10px 0;
> }
> 
> ```

Wow looks amazing thank you. Way better Yes yes  
I put both your code side by side to show everyone in the future how it would look.

![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/c/b/cb3cd8363c3cd5e0852ac8d7700707c56e778f4f.png) ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/0/7/07c2257749a2fbd2e63db4afc76fa6fc2d02ddbb.png)

---

<div class="post-metadata">

**Author:** ![abe.sherman](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/abe.sherman/32/11260_2.png) [@abe.sherman](https://community.glideapps.com/u/abe.sherman)\
**Post date:** [March 18, 2021, 3:42pm UTC](https://community.glideapps.com/t/and-basic-css-table-tricks/24424/8 "2021-03-18T15:42:44Z")

</div>

Can we adjust this script even more?

 ![Screenshot_20210318-113944 __01__ 01](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/a/9/a91f86ed90c264af73c33e5fe4a34486cc7e8bd1.jpeg)

---

<div class="post-metadata">

**Author:** ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)\
**Post date:** [March 18, 2021, 3:55pm UTC](https://community.glideapps.com/t/and-basic-css-table-tricks/24424/9 "2021-03-18T15:55:35Z")

</div>

Yep! Add the following:

```auto
.sts-label {
    max-width: 85% !important;
}

```

The `85%` is arbitrary.

---

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [March 18, 2021, 3:59pm UTC](https://community.glideapps.com/t/and-basic-css-table-tricks/24424/10 "2021-03-18T15:59:34Z")

</div>

Great job!  
Any news about controlling left and right panels in tablet mode?  
To apply CSS and not affect both sides

---

<div class="post-metadata">

**Author:** ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)\
**Post date:** [March 18, 2021, 4:00pm UTC](https://community.glideapps.com/t/and-basic-css-table-tricks/24424/11 "2021-03-18T16:00:15Z")

</div>

Hm. Haven’t attempted this.

---

<div class="post-metadata">

**Author:** ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)\
**Post date:** [March 18, 2021, 4:04pm UTC](https://community.glideapps.com/t/and-basic-css-table-tricks/24424/12 "2021-03-18T16:04:03Z")

</div>

> [@Uzo](#):
>
> Any news about controlling left and right panels in tablet mode?  
> To apply CSS and not affect both sides

### Easy enough!

Example:

```auto
<pre><span><style>
.left-panel .card-title {
font-size: .4rem !important;
}

.right-panel .card-title {
font-size: 2rem !important;
}

```

 ![Screen Shot 2021-03-18 at 12.02.56 PM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/b/1/b1bd8e1b257aaf05442053a9848d34dd1374f3e3.jpeg)

---

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [March 18, 2021, 4:06pm UTC](https://community.glideapps.com/t/and-basic-css-table-tricks/24424/13 "2021-03-18T16:06:25Z")

</div>

Thank you!  
I need to try it when I’m back home… i wonder how it will affect mobile… is mobile considered left?

---

<div class="post-metadata">

**Author:** ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)\
**Post date:** [March 18, 2021, 4:13pm UTC](https://community.glideapps.com/t/and-basic-css-table-tricks/24424/14 "2021-03-18T16:13:36Z")

</div>

@Robert_Petitto slightly off topic, but would you happen to know how to target individual classes using data-test?

I have a few [data-test=“app-text-box”] elements on the screen, but I want to alter only the first one for example. Tried nth child, nth type, first child, but I think that’s affecting the child element within that parent. Hope that makes sense.

This screen shot shows two text components. I want to round the top corners of the first text component and the bottom corners of the bottom text component. I can’t seem to get it to target only one at a time.

without rounding  
 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/d/b/dbf33394a7b49788e1348a473fe6898a0ff491af.png)

with rounding  
 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/3/5/350b1b2c5e7b0c7552c8761d4fed63610ca4d64e.png)

---

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [March 18, 2021, 4:37pm UTC](https://community.glideapps.com/t/and-basic-css-table-tricks/24424/15 "2021-03-18T16:37:17Z")

</div>

Code BOOK updated! tnx again!

> **[Code BOOK](https://code-book.glideapp.io/dl/ewAiAHQAIgA6ADIALAAiAHMAIgA6ACIAYwBsAGEAcwBzAC0AYwBvAGQAZQBzACIALAAiAHIAIgA6ACIAaABqAEMAdABLAEwAeQA1AFEAUQBDAHMAbwBpADgAdQBOAEwASgBQAGoAdwAiACwAIgBuACIAOgAiAEMAUwBTACAAYwBvAGQAZQAiAH0A)**
>
> share cool codes, scripts and links

---

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [March 18, 2021, 5:08pm UTC](https://community.glideapps.com/t/and-basic-css-table-tricks/24424/16 "2021-03-18T17:08:02Z")

</div>

im trying to apply it to images, but I can’t make it work…

```
> 
> <span/>
> <style>
> #app-root div[opacity='1'] {
>  
> }
> . right-panel . nav-bar-root {
> content: "";
> display: block;
> background-image: url( https://storage.googleapis.com/glide-prod.appspot.com/uploads-v2/Ts2Buzag3NDsfAjWHHQQ/pub/FECSxU5xp4fOzxcnJjyV.jpg);
> background-size: 100% 100%;
> background-repeat: no-repeat; 
> background-position: center, center;
> !important;
> ;}
> </style>
```

---

<div class="post-metadata">

**Author:** ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)\
**Post date:** [March 18, 2021, 5:08pm UTC](https://community.glideapps.com/t/and-basic-css-table-tricks/24424/17 "2021-03-18T17:08:58Z")

</div>

There shouldn’t be spaces between the `.` and the classname

---

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [March 18, 2021, 5:10pm UTC](https://community.glideapps.com/t/and-basic-css-table-tricks/24424/18 "2021-03-18T17:10:50Z")

</div>

your code work with spaces… anyway, it is not working without spaces too

---

<div class="post-metadata">

**Author:** ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)\
**Post date:** [March 18, 2021, 5:15pm UTC](https://community.glideapps.com/t/and-basic-css-table-tricks/24424/19 "2021-03-18T17:15:24Z")

</div>

I can’t figure it out. I think its something close to this:

```auto
<pre><span><style>
div[id*='screenScrollView'] > * > [data-test="app-text-box"]:nth-of-type(1) {
color: red;
}

```

Problem is that the nth-of-type() finds similar elements within the same parent element but each component is housed in it’s own bubble (the two text components aren’t in the same parent).

Maybe someone more well-versed in CSS can assist here.

---

<div class="post-metadata">

**Author:** ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)\
**Post date:** [March 18, 2021, 5:16pm UTC](https://community.glideapps.com/t/and-basic-css-table-tricks/24424/20 "2021-03-18T17:16:23Z")

</div>

> [@Uzo](#):
>
> ```auto
> > background-position: center, center;
> > !important;
> > ;}
> > </style>
> 
> ```

This part doesn’t look right. Why the hanging !important; and the hanging final ;?

[Next page](https://community.glideapps.com/t/and-basic-css-table-tricks/24424.md?page=2)