Arrange compact inline list into a single line with CSS

[Himaladin]

Hi @ThinhDinh please help,
I managed to pull a compact inline list into a single line array using CSS. How can I move the image to the leftmost column?
Much appreciate for your help.

<pre><span><style>

/*Image*/
[data-test="list-item"] .imageBaseStyle {
width:5%;
height:auto;
margin: -40px 0px -40px 0px;
padding: 10px;
border-radius: 50%;
}

/*Left Text*/
[data-test="list-item"] .textStyle.topItem{
margin: 0px 0 0 0%;
width:33%;
border-radius: 5px; 
background:  #2e3442;
background-size: contain;
text-align: center;
font-size: 100%;
color: white !important;
line-height : 10px;
padding: 10px 7px;
font-weight: 600;
}

/*Middle text*/
[data-test="list-item"] .textDetailStyle {
width:33%;
margin: -30px 0 0 35%;
border-radius: 5px; 
background:  #2e3442;
background-size: contain;
text-align: center;
font-size: 100%;
color: white !important;
line-height : 10px;
padding: 10px 7px;
font-weight: 600;
}

/*Right text*/
[data-test="list-item"] .textCaptionStyle {
width:30%;
margin: -30px 0 0 70%;
border-radius: 5px; 
background:  #2e3442;
background-size: contain;
text-align: center;
font-size: 100%;
color: white !important;
line-height : 10px;
padding: 10px 7px;
font-weight: 600;
}

[ThinhDinh]

Can you attach an image of how your inline list is currently constructed? I need to know which fields are being displayed.

[Himaladin]

I better share my test app

My test App

[ThinhDinh]

<pre><span><style>

/*Image*/
[data-test="list-item"] .imageBaseStyle {
width:5%;
height:auto;
margin: -40px 0px -40px 0px;
padding: 10px;
border-radius: 50%;
position: fixed;
}

/*Left Image */

[data-test="list-item"].move-image-right .imageBaseStyle {
margin-left: -10px !important;
margin-right: 10px !important;
}

/*Left Text*/
[data-test="list-item"] .textStyle.topItem{
margin: 0px 0 0 15%;
width:25%;
border-radius: 5px; 
background:  #2e3442;
background-size: contain;
text-align: center;
font-size: 100%;
color: white !important;
line-height : 10px;
padding: 10px 7px;
font-weight: 600;
}

/*Middle text*/
[data-test="list-item"] .textDetailStyle {
width:25%;
margin: -30px 0 0 45%;
border-radius: 5px; 
background:  #2e3442;
background-size: contain;
text-align: center;
font-size: 100%;
color: white !important;
line-height : 10px;
padding: 10px 7px;
font-weight: 600;
}

/*Right text*/
[data-test="list-item"] .textCaptionStyle {
width:25%;
margin: -30px 0 0 75%;
border-radius: 5px; 
background:  #2e3442;
background-size: contain;
text-align: center;
font-size: 100%;
color: white !important;
line-height : 10px;
padding: 10px 7px;
font-weight: 600;
}

Nice idea!

[Himaladin]

Thank you, Thinh. With this, we have an alternative table and action included.

[Himaladin]

@ThinhDinh, if for the title, what is the target name? I couldn’t find it.
Is this stable?

[ThinhDinh]

I might be able to get there using some not selectors but it took way too much time and I don’t have much time left today.

So I propose this instead, use the “group by” element instead of the inline list title.

<pre><span><style>

[data-test="app-vertical-list"] div[style*="top: 0px"] >div >div >div{
margin: 0px 0 0 0%;
width:100%;
border-radius: 5px;
background: darkred;
background-size: contain;
text-align: left;
font-size: 120%;
color: white !important;
padding: 10px 15px;
font-weight: 800;
}

This takes advantage of the fact that the group by title has a style attached to it, we don’t have that with the inline list title.

[Himaladin]

Maybe @Darren_Murphy can help. It’s not urgent, it’s just that I can’t stop myself from continuing this idea to my next goal.
The idea is to change the background color in one of these columns based on certain conditions, for example, the stock of the item has run out.
Using IF-ELSE and CSS that is placed in the template column does not work to make changes in particular. Is this logic wrong, or does rich text component not cover in particular?
Sorry for bothering you so often.

[ThinhDinh]

If you want a static color for all items that you target then that would work, else it’s a no.