# CSS spacing problem in inline list

**URL:** <https://community.glideapps.com/t/css-spacing-problem-in-inline-list/25601>\
**Category:** Report a Bug\
**Created:** [April 15, 2021, 5:57pm UTC](https://community.glideapps.com/t/css-spacing-problem-in-inline-list/25601 "2021-04-15T17:57:21Z")\
**Posts on this page:** 19\
**Page:** 1

<div class="post-metadata">

**Author:** ![Jeremy\_P](https://avatars.discourse-cdn.com/v4/letter/j/13edae/32.png) [@Jeremy\_P](https://community.glideapps.com/u/Jeremy_P)\
**Post date:** [April 15, 2021, 5:57pm UTC](https://community.glideapps.com/t/css-spacing-problem-in-inline-list/25601/1 "2021-04-15T17:57:21Z")

</div>

I can’t figure out how to fix this issue with an inline list. You can see in the screenshot that the group header is offset incorrectly. Previously, I added several Rich Text components with some CSS throughout the app to adjust colors, margin, and padding on other components (like the delete buttons). Somehow this inline list was affected.

I went back and removed all of the Rich Text components, but the issue persists. Not sure what’s going on or how to fix. Any guidance is appreciated!

 ![CSS Issue Glide](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/d/3/d3666d10aa63d2e582b08fdefe81704453619e68.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:** [April 15, 2021, 11:10pm UTC](https://community.glideapps.com/t/css-spacing-problem-in-inline-list/25601/2 "2021-04-15T23:10:37Z")

</div>

Does it fix itself if you view details of an item and come back?

---

<div class="post-metadata">

**Author:** ![Jeremy\_P](https://avatars.discourse-cdn.com/v4/letter/j/13edae/32.png) [@Jeremy\_P](https://community.glideapps.com/u/Jeremy_P)\
**Post date:** [April 16, 2021, 4:52pm UTC](https://community.glideapps.com/t/css-spacing-problem-in-inline-list/25601/3 "2021-04-16T16:52:54Z")

</div>

@ThinhDinh Yes, actually. But then it get’s messed up again if I reload the page. It seems like it gets messed up when I use the search box. How did you know? Do you know what is going on?

---

<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:** [April 16, 2021, 5:12pm UTC](https://community.glideapps.com/t/css-spacing-problem-in-inline-list/25601/4 "2021-04-16T17:12:47Z")

</div>

Have you removed all CSS from everywhere in your app, or only that screen? I’ve seen something similar in one of my apps where I did some very heavy CSS manipulation on one screen, but when I view the details of a list item, it causes major overlap issues. In another app, I just have a very minor issue with cards bumping into each other, but nothing overlapping. I think it is potentially possible that messing with CSS (not officially supported) on one screen may have an effect on another screen.

> [@Display of bottom border stroke missing (non urgent)](https://community.glideapps.com/t/display-of-bottom-border-stroke-missing-non-urgent/22720/6):
>
> Yes, I have this same problem! In my main app, whenever I get to this screen, the cards are initially smashed together with no gap between them. Same as you, when I open a card and come back, then it straightens out and the gap comes back. In my calendar app, I have the same issue, but to a much more extreme level. They are much more cut off and actually overlay each other. Usually opening one of th…

---

<div class="post-metadata">

**Author:** ![Jeremy\_P](https://avatars.discourse-cdn.com/v4/letter/j/13edae/32.png) [@Jeremy\_P](https://community.glideapps.com/u/Jeremy_P)\
**Post date:** [April 16, 2021, 6:05pm UTC](https://community.glideapps.com/t/css-spacing-problem-in-inline-list/25601/5 "2021-04-16T18:05:45Z")

</div>

@Jeff_Hager Wow, thanks for linking to the other post, good to know I’m not the only one running into this issue.

I removed all of my CSS from the entire app and I’m still experiencing the problem. It’s so strange because I only added the CSS a few days ago and didn’t notice an issue before that. I thought that adding CSS caused the problem, so I removed the CSS to fix it, but it isn’t fixed. I suppose there’s a slight chance that I hid some CSS somewhere and can’t find it to get rid of it, otherwise it seems like a real bug with inline list formatting. I’ve spent hours trying different things to fix it.

For example, I noticed that the inline list has div elements with ‘position: absolute’ and fixed row heights. When I tried to change those attributes in CSS it didn’t work. Not sure what else to try.

---

<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:** [April 16, 2021, 11:08pm UTC](https://community.glideapps.com/t/css-spacing-problem-in-inline-list/25601/6 "2021-04-16T23:08:37Z")

</div>

Hard to say. Might be something to submit to support.

---

<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:** [April 16, 2021, 11:21pm UTC](https://community.glideapps.com/t/css-spacing-problem-in-inline-list/25601/7 "2021-04-16T23:21:00Z")

</div>

Also, might not be related to the problem here but your CSS is unlikely to work in search environments. When you “search” something I believe it’s a brand new screen and the CSS element you have in your rich text is not applied there.

---

<div class="post-metadata">

**Author:** ![Jeremy\_P](https://avatars.discourse-cdn.com/v4/letter/j/13edae/32.png) [@Jeremy\_P](https://community.glideapps.com/u/Jeremy_P)\
**Post date:** [May 4, 2021, 5:16pm UTC](https://community.glideapps.com/t/css-spacing-problem-in-inline-list/25601/8 "2021-05-04T17:16:49Z")

</div>

This seems to be the case. I added a green border to the cell element

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

When I search, the green border disappears and the spacing overlaps:

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/0/d/0dba05186668b8a8a0875adb2175041b8966c7e4.jpeg)

In another search, I see overlap AND huge white space (notice the logos for the “Pharmaceutical” category start at the bottom):

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/4/8/48eb8af7b9024052f25047e38390e6eb8907bbaa.jpeg)

When I inspect the rows & cells in the normal list and the search list view, the div classes are the same.

But I just thought of something… when I start searching, screen components like the button are hidden/removed so it’s likely that the rich text component where I put the CSS is hidden/removed as well. That might be why the CSS doesn’t work on the search screen.

@Jeff_Hager or @ThinhDinh might be a dumb question, but how do I submit this to support, other than creating this bug post?  
The issue is: Inline lists with tile or card styling have a row spacing problem when the user uses the search box

---

<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:** [May 4, 2021, 8:30pm UTC](https://community.glideapps.com/t/css-spacing-problem-in-inline-list/25601/9 "2021-05-04T20:30:27Z")

</div>

I might need some clarification here. Your latest screenshots seem to show that everything is spaced correctly. This is compared to your original post where you had overlapping issues. Do you still have overlapping issues, or has that been resolved? Also, what exactly are you asking to submit to support? If it’s regarding the use of CSS, I don’t think you are going to get any official support on that because the use of CSS is not supported.

I’m just trying to understand if there is a problem with native glide functionality, or if there is a self induced problem due to CSS manipulation.

---

<div class="post-metadata">

**Author:** ![Jeremy\_P](https://avatars.discourse-cdn.com/v4/letter/j/13edae/32.png) [@Jeremy\_P](https://community.glideapps.com/u/Jeremy_P)\
**Post date:** [May 4, 2021, 10:22pm UTC](https://community.glideapps.com/t/css-spacing-problem-in-inline-list/25601/10 "2021-05-04T22:22:40Z")

</div>

So sorry for the confusion. I edited the last post with screenshots that better demonstrate that there is still a spacing issue in search.

Re: the support ticket: My CSS is not causing the spacing issue. Even when I delete all CSS and rich text boxes from the app, there is a persistent issue with inline list spacing. In my app, inline lists with tile or card styling have a row spacing problem when the user uses the search box. The spacing issue is severe, as you can see from the screenshots above, and renders the lists unusable because some of the list items are almost completely obscured.

And by the way, thank you for your attention and help

---

<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:** [May 5, 2021, 12:54am UTC](https://community.glideapps.com/t/css-spacing-problem-in-inline-list/25601/11 "2021-05-05T00:54:08Z")

</div>

OK, I think I understand, and obviously something isn’t right.

Would you be willing to make a version that we can copy to take a look? I played around a bit on a couple of my apps, but I am not able to duplicate the issue, so I’m not sure if you have it configured a certain way that I am unable to reproduce, or if something else is going on.

---

<div class="post-metadata">

**Author:** ![Jeremy\_P](https://avatars.discourse-cdn.com/v4/letter/j/13edae/32.png) [@Jeremy\_P](https://community.glideapps.com/u/Jeremy_P)\
**Post date:** [May 5, 2021, 3:19am UTC](https://community.glideapps.com/t/css-spacing-problem-in-inline-list/25601/12 "2021-05-05T03:19:03Z")

</div>

Yes, I’m happy to share. Is there a way to do that without making it a template?

---

<div class="post-metadata">

**Author:** ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)\
**Post date:** [May 5, 2021, 3:43am UTC](https://community.glideapps.com/t/css-spacing-problem-in-inline-list/25601/13 "2021-05-05T03:43:26Z")

</div>

Is this the same as the issue reported below?

> [@List in Card View - Loses Spacing](https://community.glideapps.com/t/list-in-card-view-loses-spacing/24495):
>
> A lot of our apps use the beautiful card view for lists. Recently they have all started exhibiting strange behaviour when “initially loaded”. The cards lose their vertical spacing. If you navigate away, then return, the spacing appears correctly. This is being reported by several customers and we can also repeat quite easily. It seems as though it’s a timing issue when the list first gets loaded.

---

<div class="post-metadata">

**Author:** ![Jeremy\_P](https://avatars.discourse-cdn.com/v4/letter/j/13edae/32.png) [@Jeremy\_P](https://community.glideapps.com/u/Jeremy_P)\
**Post date:** [May 5, 2021, 5:33am UTC](https://community.glideapps.com/t/css-spacing-problem-in-inline-list/25601/14 "2021-05-05T05:33:12Z")

</div>

Yes, this looks related! Thanks for the heads up. My screenshots seem more severe when the user uses the search box to filter an inline list. It becomes unusable. I just figured out how to log a new support ticket. Hoping this gets some visibility

---

<div class="post-metadata">

**Author:** ![Krivo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/krivo/32/5363_2.png) [@Krivo](https://community.glideapps.com/u/Krivo)\
**Post date:** [September 26, 2021, 7:12am UTC](https://community.glideapps.com/t/css-spacing-problem-in-inline-list/25601/15 "2021-09-26T07:12:24Z")

</div>

@Jeremy_P any news on this problem. I’m seeing a similar or same problem

---

<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:** [October 26, 2021, 10:28pm UTC](https://community.glideapps.com/t/css-spacing-problem-in-inline-list/25601/16 "2021-10-26T22:28:18Z")

</div>

Closing due to inactivity. This topic will be deleted in a few weeks if there are no more comments.

---

<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:** [October 26, 2021, 10:28pm UTC](https://community.glideapps.com/t/css-spacing-problem-in-inline-list/25601/17 "2021-10-26T22:28:18Z")

</div>



---

<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:** [November 25, 2021, 10:28pm UTC](https://community.glideapps.com/t/css-spacing-problem-in-inline-list/25601/18 "2021-11-25T22:28:34Z")

</div>



---

<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:** [November 25, 2021, 10:28pm UTC](https://community.glideapps.com/t/css-spacing-problem-in-inline-list/25601/19 "2021-11-25T22:28:35Z")

</div>


