Inline list horizontal ortientation issues

Hallo,

We’re now in the beta phase with our app so we are driving new users to it and overall is just great!

However, most of the users told us about the padding between one element and another on the inline lists. It seems that is not that “obvious” to notice that there are more elements on the right and it’s complimentary with the lack of “swipe area” due it has a very specific area to touch in order to get the swipe between elements.

I don’t know if anyone has noticed but it would be great to have a look at this. We think that a few more of the new element at the right and a more recognizable touch area will definitely do the work.

All the best,
Naz

I agree with this, it’s not very obvious to the eye but we only have that much screen space to work with. I would use that space for a right arrow.

1 Like

Way more functional! Would love to see this.

1 Like

Or better yet, if we choose horizontal inline list, the dimensions of the tile get slightly smaller so as to fit more of the offscreen tile into the padding

@tristan

2 Likes

Example— 2:3 tile before and after with CSS:

5 Likes

That’s a much better use of screen real estate!

1 Like

Spot on with that layout :+1:

1 Like

I am not sure I understand the issue.

The horizontal list is intended to work this way—the right-most element is shown partially off-screen to indicate that there is more content to scroll. This is standard design for scrolling on touch devices, for both horizontal and vertical axes.

Are you asking for this element to be more on-screen, and more visible?

Exactly. The right most element is BARELY shown and it isn’t obvious to the user that there is additional content to be seen.

5 Likes

Completely off topic, but I’d be willing to bet that you took those screenshots on a MacBook :wink:

2 Likes

Yup. Why?

The blue boxes :joy:

2 Likes

Echoing @Apto_Cincodos that my users are giving me the same feedback. Thanks for the guidance

4 Likes

Great idea, noted.

4 Likes

Can you share the CSS for this Bob? I have an immediate use case for this. Thank you!

Whoops…didn’t save it. I’ll try to recreate it later today when I get in front of my computer.

2 Likes

Have one that works for me. Thanks for the idea Bob!

<pre><span><style>

[data-test="app-horizontal-list"] .inner {
grid-template-columns: repeat(100, 275px);
}
5 Likes

Nice!

1 Like

That looks really great! Any hints on how I can link to my lists? Kinda of new on the CSS thing :sweat_smile:

1 Like

You can add the code above to a rich text component on a details screen.

What I was showing above is tiles, 3:2 size, horizontal.