CSS to make Word Wrap on Tiles

Ask for Help
1

Looking to use the text option as an overlay on Tiles (bottom left text), but also want it to word wrap. Can anybody help me with this?

2

Hola @Joe_Gabriele

Have you already checked this thread?

There are tons of useful CSS codes that might help you with what you need.

3

Thanks! I found it

<pre> <span> <style> 

.tile-title[data-test="tile-item-title"] {
white-space: break-spaces;
}
2 Likes
4

Interesting thing I found.

The above CSS works, but when I type in the search bar to filter out results, the CSS no longer is applied. Anybody know how to avoid this from happening?

5

When you use search, the screen becomes a list style instead of a details style, so any rich text components are not available.

The only solution I could think of is to either not use search, or try to build your own with maybe a template column that joins all searchable columns together, and some creative relations, lookups, if columns (that checks ‘included in’) to try to make it reasonably functional.

1 Like
6

Ah, I didnt know that! Thanks for that!

No way to make Details Style look one way and the List Style another way?

7

It’s something that became apparent in the following thread, but you would also have the same issue if you utilize “See All”.

What do you mean by making the details style look different from the list style? Once you start using the search feature, then only lists are displayed on the screen. It might still be a details screen, or some kind of hybrid, but only the searchable lists are displayed at that point. Just keep in mind that injecting CSS into an app is a hack job at best. Some things will work and some things will not work. But most importantly, you can only apply CSS through a Rich Text component. If that Rich Text component becomes unavailable or hidden, then there is no way to get that CSS injected.

8

I believe in the List view, I can still change the size of the tile, # per row and my issue, the text overlay. With the “See All”, I can still change the way the Tiles look, even if CSS cannot be added.

Currently, in my Details view, I use Text Overlay with bottom left alignment + CSS to wrap the text. Gives it a much cleaner look.

But when I search and it switches to List view, could I change it to Text Below + Wrap?

I guess the other option, would be to remove Search from the primary screen, reduce the # of tiles shown and have people click “See All” and then search the tiles that way in a new format.

9

For my experience, if you have any css or code changing some style in your app and you click on the search bar and type, disable everything.

So, I guess that’s not possible

1 Like