Hi guys,
I’m having some fun trying to replicate a word game. It centers on forming 5 letter words using letter tiles. My issue is that the max number of tiles that I can show in a horizontal list seems to be 4. Hence, you have to add a scroll option, which is a pain. I would really like to be able to the full 5 letter word at any one time.
Is there an option I am missing that will display 5 elements in a list? Or perhaps there is some coding magic that can shrink the list so that 5 will fit across a screen?
Thanks in advance,
Simon.
You’d need to use CSS. Something like this, but you’ll need to play with the height/widths (both 45px below)
<pre><span><style>
//requires tiles, 4-wide, horizontal layout
.inner {
grid-template-columns: repeat(5, 45px) !important;
}
.tile-image-area :nth-child(1) {
height: 45px;
}
4 Likes
Thanks so much! I will experiment
I seem to be struggling. My first time with CSS, can I double check:
I created a Rich text element then pasted your code into it.
I have changed the two ‘45’ values to a lot of options, from 5 through to 500.
The result is the heights of the tiles change, but at no time does the 5th element begin to appear… any tips please?
I have tried… is there something you can recommend specifically?
Uzo
January 5, 2022, 11:02pm
8
are you using my code or Robert’s?
Sorry. I’m on my phone right now so I must’ve miscopied my code. When I get in front of a computer tonight I’ll send you the correct CSS.
Uzo
January 5, 2022, 11:12pm
10
delete the comment in Roberts code… drag rich text element at the end… and it should work now…
<pre><span><style>
.inner {
grid-template-columns: repeat(5, 50%) !important;
}
.tile-image-area :nth-child(1) {
height: 45px;
}
Ya…try this:
<pre><span><style>
[data-test="app-horizontal-list"] .inner {
grid-template-columns: repeat(5, 66.5px) !important;
margin: 15px;
column-gap: 3px !important;
}
[data-test="app-horizontal-list"] .tile-image-area div:nth-of-type(1) {
height: 70px;
}
2 Likes
Brilliant thank you!
Can’t quite center the letters but I can live with that
3 Likes
Is that letter a field you referenced in the inline list?
Yes that’s right. The tile has a color background (image) and then the letter is a column entry…
Change your alignment to center and use this code.
<pre><span><style>
[data-test="app-horizontal-list"] .inner {
grid-template-columns: repeat(5, 66.5px) !important;
margin: 15px;
column-gap: 3px !important;
}
[data-test="app-horizontal-list"] .tile-image-area div:nth-of-type(1) {
height: 50px;
}
[data-test="app-horizontal-list"] .tile-overlay {
background: linear-gradient(rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 60%);
}
[data-test="app-horizontal-list"] .tile-overlay .tile-title {
padding-top: 10px;
}
3 Likes
ThinhDinh:
<pre><span><style>
[data-test="app-horizontal-list"] .inner {
grid-template-columns: repeat(5, 66.5px) !important;
margin: 15px;
column-gap: 3px !important;
}
[data-test="app-horizontal-list"] .tile-image-area div:nth-of-type(1) {
height: 50px;
}
[data-test="app-horizontal-list"] .tile-overlay {
background: linear-gradient(rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 60%);
}
[data-test="app-horizontal-list"] .tile-overlay .tile-title {
padding-top: 10px;
}
Wow that’s now perfect! Thank you so much
And how did you manage to get this is just 19 seconds?!! Genius mode!
1 Like
system
January 8, 2022, 7:35am
17
This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.
