CSS to display more than 4 horizontal tiles

Ask for Help
1

Hi Experts,

So this is going to be a challenge for all CSS Experts :smiley: .

I was facing a challenge to display 8 horizontal tiles in one row but I achieved that through CSS. Thanks to @Lucas_Pires and @Robert_Petitto.

Now, I need to display 16 tiles as shown on the screenshot :see_no_evil:. I am sure this is going to be trickier, but I am also sure nothing is trickier for our super experts :smiley:

First screenshot shows what I want to achieve, and second screenshot shows what I have done till now.

Looking forward to some helpful responses from our experts :slight_smile:

Screenshot_20220702-054526_WhatsAppBusiness
Screenshot_20220702-054526_WhatsAppBusiness1039×705 91.4 KB

Help css
Help css1920×737 154 KB

2

Seeing you have the CSS code for other “lines” already, wouldn’t it just be a matter of changing the repeat params? (Say 16, 5px - there’s not a lot of screen estate to work with, to be honest)

1 Like
3

Maybe you could use GraphViz?

https://quickchart.io/documentation/graphviz-api/

3 Likes
4

The thing is, this is basically a checklist app. When a circle is tapped, it is changed into BLUE color. I don’t think I can use quickcharts for that.

5

Yes true, but the circles are not fitting in when I set the params to 16 - 5 px

6

Can you send over a screenshot on how it looks like at the moment?

7

I found the solution!!! There was a piece missing on my existing CSS code. Entered that and it works just like I wanted.

1 Like
8

It would be nice if you could share the CSS, just in case somebody else wants to do something similar in future. And for that matter, a more descriptive topic title would also be useful.

3 Likes
9 
<pre><span><style>

div[id*='screenScrollView'] > div > :nth-of-type(9) [data-test="app-horizontal-list"] .inner {
grid-template-columns: repeat(16, 20px) !important;
margin: 1px;
column-gap: 1.75px !important;
}
div[id*='screenScrollView'] > div > :nth-of-type(9) [data-test="app-horizontal-list"] .tile-image-area div:nth-of-type(1) {
   height: 20px;
}
1 Like
10

CSS to display
CSS to display1920×617 140 KB

11

Yes! This is what I do here:

2 Likes
12

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