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!
Does it fix itself if you view details of an item and come back?
@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?
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.
@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.
Hard to say. Might be something to submit to support.
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.
This seems to be the case. I added a green border to the cell element
When I search, the green border disappears and the spacing overlaps:
In another search, I see overlap AND huge white space (notice the logos for the “Pharmaceutical” category start at the bottom):
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
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.
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
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.
Yes, I’m happy to share. Is there a way to do that without making it a template?
Is this the same as the issue reported below?
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
Closing due to inactivity. This topic will be deleted in a few weeks if there are no more comments.
