# Arrange compact inline list into a single line with CSS

**URL:** <https://community.glideapps.com/t/arrange-compact-inline-list-into-a-single-line-with-css/35524>\
**Category:** Ask for Help\
**Created:** [December 5, 2021, 8:11am UTC](https://community.glideapps.com/t/arrange-compact-inline-list-into-a-single-line-with-css/35524 "2021-12-05T08:11:35Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [December 5, 2021, 8:11am UTC](https://community.glideapps.com/t/arrange-compact-inline-list-into-a-single-line-with-css/35524/1 "2021-12-05T08:11:35Z")

</div>

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.

 ![Screenshot 2021-12-05 145720](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/5/4/545999912cc99cdfab4d486613dbfceb625ffa2c.jpeg)

```auto
<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;
}

```

---

<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:** [December 5, 2021, 9:56am UTC](https://community.glideapps.com/t/arrange-compact-inline-list-into-a-single-line-with-css/35524/2 "2021-12-05T09:56:06Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [December 5, 2021, 10:18am UTC](https://community.glideapps.com/t/arrange-compact-inline-list-into-a-single-line-with-css/35524/3 "2021-12-05T10:18:10Z")

</div>

I better share my test app

> **[My test App](https://my-test-app.glideapp.io/)**

---

<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:** [December 5, 2021, 11:16am UTC](https://community.glideapps.com/t/arrange-compact-inline-list-into-a-single-line-with-css/35524/4 "2021-12-05T11:16:36Z")

</div>

```auto
<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;
}

```

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/1/2/12b233a486e937826e6bceb8fadc96f9b01b77c5.jpeg)

Nice idea!

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [December 5, 2021, 11:24am UTC](https://community.glideapps.com/t/arrange-compact-inline-list-into-a-single-line-with-css/35524/5 "2021-12-05T11:24:34Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [December 5, 2021, 11:59am UTC](https://community.glideapps.com/t/arrange-compact-inline-list-into-a-single-line-with-css/35524/6 "2021-12-05T11:59:20Z")

</div>

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

 ![Screenshot 2021-12-05 191808](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/e/9/e93abb173f34a4f271b4f7029fca28b219713e80.jpeg)

---

<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:** [December 5, 2021, 1:12pm UTC](https://community.glideapps.com/t/arrange-compact-inline-list-into-a-single-line-with-css/35524/7 "2021-12-05T13:12:27Z")

</div>

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

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.

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

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [December 5, 2021, 2:28pm UTC](https://community.glideapps.com/t/arrange-compact-inline-list-into-a-single-line-with-css/35524/8 "2021-12-05T14:28:00Z")

</div>

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.

---

<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:** [December 5, 2021, 3:51pm UTC](https://community.glideapps.com/t/arrange-compact-inline-list-into-a-single-line-with-css/35524/9 "2021-12-05T15:51:50Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![system](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/system/32/53398_2.png) [@system](https://community.glideapps.com/u/system)\
**Post date:** [December 6, 2021, 3:52pm UTC](https://community.glideapps.com/t/arrange-compact-inline-list-into-a-single-line-with-css/35524/10 "2021-12-06T15:52:23Z")

</div>

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.