Jump to content
  • 0

Long list-string fields spilling over into columns?


madtravellingal

Question

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?

1.jpg

2.jpg

Link to comment
Share on other sites

3 answers to this question

Recommended Posts

  • 1

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. 

image.png

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

Hope that helps!

Link to comment
Share on other sites

  • 1

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:

hE4ktrb.png

And:

X16tj2F.png

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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...