Hello! I want to ask you if this thing it’s possible:
I have this inline list in a detailed screen:
And to make it more visual i thought to put some background but only in the cards that have the 100% completed (like the first one):
Is there any chance to make a CSS code only for that ones?
Thanks!
I don’t know the necessary CSS code, but I think the start of it would be to have an IFTHEN column to add an image for the 100% completion. Once you have that, I think you can likely add CSS to make the image fill the card (and it would only fill the ones with an image — the 100% ones).
Not that easy because i want the image as background not as image in the card. But i thougjt now that maybe i can add a css to fill all the backgrounds with an ifthenelse column that put into a twmplate a background of some color or a white one.
Well it’s not straightforward because you would be filling all cards with a single image though, you can’t apply an if then else to it.
Right. CSS would apply to all cards. There’s no way to select cards using CSS based on the data found within the card (at least not that I know of).
But wouldn’t an IFTHEN that adds an image based on the %, leaving others with an empty image, work to at least get the desired image showing on the desired cards? Then the necessary CSS to fill the card background would only “apply” to the ones that actually have an image. This is just theoretical and the way I’d imagine it would work.
Alternatively, could the list be sorted to only show 100% cards, apply CSS to that whole list, then add a 2nd inline list of non-100% cards (without any CSS on that list). I seem to remember an issue where the card’s sizing doesn’t properly adjust if some have an image and some don’t.
That If then will be card-specific only in the details view. You can’t do that when showing a whole list.
Hello,
I made a CSS in this sense.
Give me a little time to give you an example.
Here is an example.
you can change the background picture based on a value or the like.
you can also use several different images for different cases.
The trick is to have an empty image to display if the condition is not met.
I made a 10x10px transparent image.
For the background image (100% box), I made a 30x30px with an opacity of 30%, then you have to experiment to find the right color and the right opacity.
CSS is then very simple (see the demo application)
Do not use my links to the images directly, as I may delete them from my account!
Demo Application
I will try that today thanks!!
Nice! I have an immediate use for that.
very pretty 
Question - how would I adjust that CSS to move the card title to the top of the container?
I’m using a 3:1 image with the Float card style.
Edit, margin-top: calc(-35% + 1px);
I also changed the Height: 120% to Height: 100vh;
/* Image */
[data-test="app-vertical-list"] .card-image-container img {
height:100vh;
}
/* Zone Bottom area */
[data-test="app-vertical-list"] .bottom-area {
background:transparent !important;
margin-top: calc(-35% + 1px);
z-index:1;
}
I modified my small demo application with this option 
Actually, mine looks much better without the red dots - and they aren’t necessary now.
Thanks for that, was exactly what I needed
PS. @adriasoce sorry for hijacking your topic 
It works for me too!! Thanks a lot!
No worries man, I want to know also what you are trying to do because maybe it will be useful for others or for other projects.
I find it pretty with the red dots 
beware of color blind 
an additional icon may be welcome
maybe if a user of this forum is color blind, he could give his opinion !!
