Display choice options in columns

, ,
1

Can we display the options in form of columns , in case they are large in number and are going out of the screen ?

2

Not at the moment, no. Columns are currently only enabled for images, which tend to take up more space, even in lower numbers. But I can add this to our list of possible future enhancements :slight_smile:

3

Thanks.

4

Hello ines,

I was wondering if any such feature has been added which could fit my use case.
If not, then would it be much effort to make some changes in the html css files for Prodigy?

5

With the new global_css option in v1.7, you should be able to add this pretty easily. The options container doesn’t have a human-readable class name at the moment, but you can find the current compiled one by opening your browser’s developer tools:

54
Screenshot 2019-02-23 at 13.16.54.png1460Ă—434 20.6 KB

If you’re using a modern browser, the following CSS should be all you need:

.c01132 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 20px;
}

This will display the contents of that container (i.e. the options) using CSS grid with two equal columns and a gap of 20px in between. You can add the override in your prodigy.json or you recipe config like this:

"global_css": ".c01132 {...}"  # or via variable or from file
2 Likes
6

That worked.
Thanks a lot

1 Like
7

Hello. I’m also interested in having multiple choices in several columns, for the cases where you could have multiple classes. Best regards

8

The value of grid-template-columns: in my code above are the column widths. So if you need three columns, you could make it 1fr 1fr 1fr and so on. (fr stands for “fraction of the available space”).

9

Thanks, it works, pretty good! If In my case was class .c01127. I’m trying get the font size smaller, it’s also inside this specif class?