Long list-string fields spilling over into columns?

[madtravellingal]

Hi there. New to Caspio, but loving it so far. Low-code is cool.

That said, I've far from mastered things!

I've a details page that I'm mildly happy with (I'm never 100% satisfied) but one thing that is bugging me is how much screen space a list-string field is taking up, when the particular entry has ticked a tonne of boxes in that field.

What I'd like to know is whether it's possible to split the content of that field into columns? Or other suggestions, if you have them!

The field as it stands right now is circled below in red  in the file 1.jpg.

How I'd like it to look, is circled in red in the file 2.jpg.

Any ideas?

[sandy159]

Hi @madtravellingal,

Welcome to Caspio I am glad that you enjoying it so far!

As far as I know, there is no standard feature to split the content of List-String into columns. However, it can be easily achieved with some CSS code. (That is what you probably used as well).

You may add the following code to the Header of the DataPage. Make sure to disable the HTML editor in the Advanced tab first.

<style>
div[class^='cbFormDataCell cbFormBlock6'] {
columns: 3;
}
</style>

Please note that the number 6 for the cbFormBlock6, may vary based on the position of the List-String on the page. 

Here is a useful link for the external resource: https://developer.mozilla.org/en-US/docs/Web/CSS/columns

Hope that helps!

[CoopperBackpack]

Hello @madtravellingal,

Yes, it should be possible to use CSS as mentioned @sandy159. However, the list will be always divided into 3 columns regardless of the list length.

For example:

And:

You may add the properties for the CSS class as well. In case you use the Bulleted list or Simple list to display the values, you may try this code in the Header section:

<style>

.cbFormUnorderedList{
column-count: 3;
column-gap: 50px;
}

</style>

You may refer to this external article https://www.w3schools.com/cssref/css3_pr_columns.asp

Specify the desired number of columns for the column-count property and the  pixels gap between the columns for the column-gap property (if needed, if not you may delete this property).

In case you want to apply this division conditionally depending on the list length, it looks like this requires a JavaSctipt solution.

[madtravellingal]

@sandy159 and @CoopperBackpack - thank you! 

I tried both methods, and they seemed to both achieve the same thing. I couldn't see much difference - so, again, thanks to both of you.

I have another question - but I'll kick that off in a separate thread.