Skip to Content Skip to Menu

Abbreviating a description field in a List

  • a2zcs
  • a2zcs
  • OFFLINE
  • Posts: 36
  • Thanks: 3
  • Karma: 0
1 year 1 month ago #334908 by a2zcs
Each member of our community is allowed to add a company description to their profile. I'd like to display like 200 characters or so of that description in the List view of that member, instead of the whole description. Is there a way to do that?

Please Log in or Create an account to join the conversation.

  • krileon
  • krileon
  • ONLINE
  • Posts: 48419
  • Thanks: 8274
  • Karma: 1443
1 year 1 month ago #334910 by krileon
Replied by krileon on topic Abbreviating a description field in a List
You'll need to use CB Code Field to apply PHP to the fields value to shorten it or you can try using CSS. Example using CSS as follows.
Code:
.cbUserListFC_FIELD-NAME-HERE { display: inline-block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200ch; }

Replace FIELD-NAME-HERE with the name of your field. The max length is using a character length of 200 that can be adjusted as needed. Custom CSS can be added to CB using the following.

www.joomlapolis.com/blog/kyle/18711-template-css-overrides-made-easy

Down side of doing this with CSS is it's single line limitation.


Kyle (Krileon)
Community Builder Team Member
Before posting on forums: Read FAQ thoroughly + Read our Documentation + Search the forums
CB links: Documentation - Localization - CB Quickstart - CB Paid Subscriptions - Add-Ons - Forge
--
If you are a Professional, Developer, or CB Paid Subscriptions subscriber and have a support issue please always post in your respective support forums for best results!
--
If I've missed your support post with a delay of 3 days or greater and are a Professional, Developer, or CBSubs subscriber please send me a private message with your thread and will reply when possible!
--
Please note I am available Monday - Friday from 8:00 AM CST to 4:00 PM CST. I am away on weekends (Saturday and Sunday) and if I've missed your post on or before a weekend after business hours please wait for the next following business day (Monday) and will get to your issue as soon as possible, thank you.
--
My role here is to provide guidance and assistance. I cannot provide custom code for each custom requirement. Please do not inquire me about custom development.

Please Log in or Create an account to join the conversation.

  • a2zcs
  • a2zcs
  • OFFLINE
  • Posts: 36
  • Thanks: 3
  • Karma: 0
1 year 1 month ago #334912 by a2zcs
Replied by a2zcs on topic Abbreviating a description field in a List
Thanks, that did work. But how to remove that separator (top-border)? again at  a2zpreview4.com/accountants-and-bookkeepers

I'm good with removing all of them, or just the one above the abbreviated description.

Tried adding top-border:0 to the css you gave me before, but to no avail

Please Log in or Create an account to join the conversation.

  • krileon
  • krileon
  • ONLINE
  • Posts: 48419
  • Thanks: 8274
  • Karma: 1443
1 year 1 month ago #334913 by krileon
Replied by krileon on topic Abbreviating a description field in a List
It has a border as it's meant to be a table. If you're not going to use it like a table then use the grid layout. You can enable the grid layout under Parameters > Display of your userlist by setting "Use Grid Layout" to "Yes". Based off the looks of things you want 1 row per user so you'll want to set "Grid Layout Size" to "12" as well. Now you can use the column sizes to control each column spacing within that grid.

Alternatively add "border-0" to the CSS Class parameter for the column you want to hide the border on, but ideally since you're not using a table based display using the grid layout would be better.


Kyle (Krileon)
Community Builder Team Member
Before posting on forums: Read FAQ thoroughly + Read our Documentation + Search the forums
CB links: Documentation - Localization - CB Quickstart - CB Paid Subscriptions - Add-Ons - Forge
--
If you are a Professional, Developer, or CB Paid Subscriptions subscriber and have a support issue please always post in your respective support forums for best results!
--
If I've missed your support post with a delay of 3 days or greater and are a Professional, Developer, or CBSubs subscriber please send me a private message with your thread and will reply when possible!
--
Please note I am available Monday - Friday from 8:00 AM CST to 4:00 PM CST. I am away on weekends (Saturday and Sunday) and if I've missed your post on or before a weekend after business hours please wait for the next following business day (Monday) and will get to your issue as soon as possible, thank you.
--
My role here is to provide guidance and assistance. I cannot provide custom code for each custom requirement. Please do not inquire me about custom development.

Please Log in or Create an account to join the conversation.

  • a2zcs
  • a2zcs
  • OFFLINE
  • Posts: 36
  • Thanks: 3
  • Karma: 0
1 year 1 month ago #334915 by a2zcs
Replied by a2zcs on topic Abbreviating a description field in a List
Oops, I thought the abbreviating CSS was working, but apparently it takes the first line of every paragraph and displays the first so many characters. Please see  a2zpreview4.com/animal-care

I just need the first so many characters from the entire description.

Please Log in or Create an account to join the conversation.

  • krileon
  • krileon
  • ONLINE
  • Posts: 48419
  • Thanks: 8274
  • Karma: 1443
1 year 1 month ago #334920 by krileon
Replied by krileon on topic Abbreviating a description field in a List
Seams to be working as it's supposed to. All it does is set a max width based off character length. It will then show an ellipse (...) if possible. You can use the below to also clamp it to a single line.
Code:
.cbUserListFC_FIELD-NAME-HERE { display: -webkit-box; overflow: hidden; text-overflow: ellipsis; max-width: 200ch; -webkit-line-clamp: 1; -webkit-box-orient: vertical; }

That should look a bit better on your site. This can be simplified to the following as well if you just want to always only allow for 1 line taking up the full width.
Code:
.cbUserListFC_FIELD-NAME-HERE { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 1; -webkit-box-orient: vertical; }

Aside from that you're going to have to use PHP if you need more control over limiting the length and formatting. So you'd need to use a Code field provided by CB Code Field then apply whatever PHP you need to that field by substituting the fields value into your PHP and manipulating it.


Kyle (Krileon)
Community Builder Team Member
Before posting on forums: Read FAQ thoroughly + Read our Documentation + Search the forums
CB links: Documentation - Localization - CB Quickstart - CB Paid Subscriptions - Add-Ons - Forge
--
If you are a Professional, Developer, or CB Paid Subscriptions subscriber and have a support issue please always post in your respective support forums for best results!
--
If I've missed your support post with a delay of 3 days or greater and are a Professional, Developer, or CBSubs subscriber please send me a private message with your thread and will reply when possible!
--
Please note I am available Monday - Friday from 8:00 AM CST to 4:00 PM CST. I am away on weekends (Saturday and Sunday) and if I've missed your post on or before a weekend after business hours please wait for the next following business day (Monday) and will get to your issue as soon as possible, thank you.
--
My role here is to provide guidance and assistance. I cannot provide custom code for each custom requirement. Please do not inquire me about custom development.

Please Log in or Create an account to join the conversation.

Moderators: beatnantkrileon
Powered by Kunena Forum