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’écran 2022-06-16 à 16.44.57] Here we can see our rows where the right icon was put in the right choice [Capture d’écran 2022-06-16 à 16.50.48] 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

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.

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.

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.

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

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.

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

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 : Set Up column 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.

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”?

[image] Carter: 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 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.

[image] Darren_Murphy: 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. Yes that’s correct, and the second list was another Row, so our first choice was 1 row, 2 was another row.

Trying create a choice list with icon (CSS)

Ask for Help

Robert_Petitto June 17, 2022, 9:42pm 13

Also… vote here:

@tristan

Topic		Replies	Views
The Magic Inline List that thinks it's a Choice Component :scream: Project Showcase	12	1968	May 21, 2021
CSS: Choice component as a menu Ask for Help	31	2272	February 27, 2023
Design an inline list based on choice component Ask for Help	15	857	November 15, 2021
Add Image with Text to the Choice component Feature Requests	7	803	April 19, 2021
Choice component and CSS (still working on it) Ask for Help	4	436	September 9, 2022

Trying create a choice list with icon (CSS)

Related topics