Multirow Choice Component (aka Chips UI)

Right now, I’m just playing around so no specific action has been added.

For my experience, it works in the Editor and on my Mac’s chrome but it still separates into 2 rows on my Safari.

Oh great!!!

Acontece a mesma coisa comigo.

It works well when opened on chrome. :man_facepalming:t6:

1 Like

Make this adjustment:

.gbJqOE,.dEHvyM {
display: unset;
}

The second class (.dEHvyM) targets Safari.

3 Likes

I opened both the editor and the app on/in chrome and I see it works.

Thanks!

If you don’t mind my asking. What’s the code you’re using to put those two inline lists side-by-side? Or at least point me to where I can find them.

Thanks

1 Like

:+1: :+1: :+1:

Wait. Even better. Try this—may account for all browsers:

<pre><span><style>
.ekttti {
width: 50%;
float: left;
}
[data-test="app-button-view"] {
margin: 10px;
}
.eEPsye div:nth-child(1) {
display: block;
}
</style></span></pre>
2 Likes

It seems to work but I can’t make them look even.

Any ideas?

This is how it looks on the actual app.

what happens if you change “unset” to “unblock”

EDIT: block not “unblock”

1 Like

It fixes it.

Thanks a lot!

2 Likes

I was going to suggest nth-child to forgo those weird class names altogether. Aren’t they all just children of data-test (which I agree is the least likely of those to change)?

1 Like

Hi @Robert_Petitto,

I am still not able to get the correct output using this code. Can you please help me to know if I am doing something wrong?

Android View:

iOS View is working perfectly.

Hey @Pratik_Shah Try using this code

That one works well on both. It will look weird on the Editor but nice on the actual apps.

1 Like

Hm. Haven’t tested the code with android view. I’ll bookmark this for later.

Thanks @SantiagoPerez I tried but not working on Android (both in editor and app)
I hope @Robert_Petitto can help me out

2 Likes

Try this:

<pre><span><style>
.ekttti {
width: 50%;
float: left;
}
[data-test="app-button-view"] {
margin: 10px;
}
.eEPsye div:nth-child(1), .eEPszt div:nth-child(1) {
display: block;
}
</style></span></pre>
1 Like

I get the same result.
when on the editor the buttons appear next to each other but on the published app they appear one on top the other,
tried changing the width and borders with no luck.

couldn’t make it work

1 Like

Thanks @Robert_Petitto That worked perfectly on both OS. Thank you so much.

iOS View:

Android View:

1 Like