Streaming live at 10am (PST)

How can I limit the characters in the Collection Item Name? Currently no option in the default fiels

Hi people,
Now I was designing for an edge case and want to limit the characters for the blog title. The default field “Name” type: Plaintext has no option of “Minimum character count” and “Maximum character count”. So If someone types in an insanely long Blog title, the whole UI will break.

I don’t know if I’m missing something obvious. Looking for help…


You can’t. It’s not an option. Train your users.

@webdev I mean there should be an option if it can be done for custom fields. I think of using some custom JS to limit the characters on the front-end and append “…” at the end of each title if the characters are greater than a certain number.

You can hide the overflow and use the text-overflow CSS property to add ellipsis for text that extends beyond the container size.

With the setup above, your custom code would look something like what I have below:

<style>
  .your-class {
    text-overflow: ellipsis;
  }
</style>

Without knowing your design I can’t say for sure what else you’d need to change, but that should point you in the right direction.

@mikeyevin Thanks for the reply. I will try your suggestion too. Looks simpler. But meanwhile, I came up with this solution

Thanks to my brief coding background and Stackoverflow. Came up with this code. Checks the length of the dynamic textelement. If the length exceeds the limit, it trims the extra chars and adds “…” to the end.

#wrapper is the id of the wrapper you need to enclose the textelement in. #textelement is the id of the textelement

 $(function () {
      $("#wrapper #textelement").each(function (i) {
        var limit=70;//replace the character limit you want
        var check = false;
        if (st.includes(" ", limit-1)) {
          check = true;
        }
        if (len > limit && !check) {
          $(this).text($(this).text().substr(0, limit) + '....');
          //console.log("this");
        }
        else if (len > limit) {
          $(this).text($(this).text().substr(0, limit-1) + '....');
          //console.log("that");
        }
      });
    });

The result

Thank you for sharing this, I was having the same issue and I believe you have provided a solution for many of us.

Can you please shortly explain where should I implement the custom code mentioned above?
Also, do I need to modify the element’s ID?

Hi. I feel happy that I was of some help to you. Means a lot

Yes you need to change the elements id. Just make a div and set the id to “#wrapper”, inside this div you can use any text elements like Heading, Paragraph, Text Block etc with the id to “textelement”. Just place the code in the custom code section. And remember to use tags. i.e place the above code inside these tags.

1 Like