Trying create a choice list with icon (CSS)

Ask for Help
1

Hello,

I am experimenting with a css code which would aim to put an icon of the possible choice in a list using the “chips” mode.

I don’t know how is it possible to set-up an icon by choice, obviously in my rows this has already been done, but since it’s CSS I don’t know how I could do to put the icon in the right place.

Below is an example of what I would like.

Capture d’écran 2022-06-16 à 16.44.57
Capture d’écran 2022-06-16 à 16.44.57744×1022 27.6 KB

Here we can see our rows where the right icon was put in the right choice

Capture d’écran 2022-06-16 à 16.50.48
Capture d’écran 2022-06-16 à 16.50.48786×392 53.1 KB

And here was my CSS code:


.iEKkcy {
    display: inline-block;
    position: relative;
    cursor: pointer;
    font-weight: 400;
    font-size: 15px;
    width: 48.5%;
    line-height: 100px;
    margin: 0px px 4px 0px;
    padding: 18px px;
    border-radius: 16px; 
    overflow: hidden;
   
}
.iEKkcy ::before {
content: url(https://vidaone.ch/wp-content/uploads/2022/06/Icon-metro-heartbeat.png);
position: absolute;
 padding: 0px;
  top: 15px;
  margin-left: 0px;
  z-index: 2;
  width: 56px;
  height: 0px;


}

.iEKkcy .display-item {
    position: absolute;
    left: 0px;
    top: 0px;
    padding: 65px 0px 0px 0px;
    width: 100%;
    height: 100%;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    align-items: center;
}

.iEKkcy.current .display-item {
    color: #000;
    background-color: #DED8FC;
    font-weight: 600;
}

}

Some one have already do this for him or a client ? I just want to know if we can target the words like “Test 1” Test 2" into our CSS to put the right icon in the right place !

Thank’s

2

Have you considered using an Inline List in tiles layout instead of a choice component?
It’s possible to set that up so that it behaves like a choice component, and you can include your logos as images with zero CSS required.

3

Yes I thought about it but here in this case it is for a form. So with Inline List we cannot “select” an option, we can just click on this and after create a action.

4

As I mentioned, you can make an Inline List behave like a choice component.

What you need to do is create a single relation from the table that contains your choice options to the table/row that your screen is attached to. You can then configure an action on the inline list that does a set column values through that relation and updates the values in the same column that your choice component currently writes to.

3 Likes
5

Yes, that’s what I was testing by now, maybe it’s the better option ! And it was native so it’s better.

6

Yes, I think it’s a better option. You can do a lot with an Inline List that you can’t with a standard choice component. You can change the image/colour/text to indicate which option is selected, and you can also trigger actions - which can’t be done otherwise.

If you have problems getting it working, just ask. Myself and others here use this technique a lot.

7

Ok can u let me how u can change the image/color for indicate with option is selected ? Because i was using this only with the trigger actions

8

Ok, I searched and I really did not find this solution. The only thing I managed to do was create a trigger to set up a column, the problem is that it only works if I trigger with :

  1. Set Up column
  2. Open new form

When I open the new form it is impossible for me to configure the 2nd choice which is in another Row, this technique only works if my choice is made on a Row.

So my problem persists, in my form I have 2 choices to make from 2 different rows.

So we come back to the famous problem that with the Inline list I cannot “select” a choice.

I Need to have 2 Inline List for make 2 choice, from 2 different row to put it into the same ROW.

Row 1: Choice 1 where need to be, Choice 2, where need to be.
Row 2: Multiple Choice 1
Row 3: Multiple Choice 2

And i dont want do a trigger “Add a row”, because this option need to be only when the client validate the form, so i dont want add a row in the first choice of the client, because maybe the client dont gonna finish the form and we gonna have a “Blank Row” we don’t need it.

That’s why my need it’s really a “Selected Choice” from 2 rows different.

9

Why do you need to open a new form though? I thought this was only for adding user choices in a single form, where you need 2 “choice components”?

10

Just trying to understand this. What I am understanding is that you want to make a selection from the first list, and then the second list will change depending on which option you choose from the first list. And you want this to look like the first screen shot that you posted. Is that correct? If it is, let me know and I’ll make a short video to show you how to do it.

11

Yes that’s correct, and the second list was another Row, so our first choice was 1 row, 2 was another row.

12

Do you mean that the value selected for each one should be written to a separate row?
In the same column, or two different columns?
That’s quite an odd use case - what happens with these values once they have been written?

1 Like
13

Also… vote here:

@tristan

3 Likes
14

No the choice was in 2 separate rows, but the value for each one was write in a row with 2 different columns.

15

ah, I see.
Okay, that’s easy enough. Did you still need some help with that?
If yes, please say so and I’ll make an example for you.

1 Like
16

Yes, I will appreciate for a help.

I know to do with 1 row, but my problem it’s do it with 2 different row (choice list).

17

:smiley: