And Basic css Table tricks?

image

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.

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

2 Likes

Try this:

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

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

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

3 Likes

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

1 Like

otherwise this:
Screen Shot 2021-03-17 at 9.51.44 PM

1 Like

Good catch bro!

1 Like

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 image

1 Like

Can we adjust this script even more?

Yep! Add the following:

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

The 85% is arbitrary.

4 Likes

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

Hm. Haven’t attempted this.

1 Like

Easy enough!

Example:

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

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

2 Likes

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

@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

with rounding
image

Code BOOK updated! tnx again!

1 Like

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>

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

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

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

<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.

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