Question

My Profile widget - User Additional Fields and displaying more than 1 line of text

  • 30 October 2023
  • 3 replies
  • 64 views
B
Rank
Userlevel 2
Badge

Hi Docebo Community,

 

The team here at Southwestern Consulting would like to make some customizations to the My Profile widget, and I spent time searching the boards and did not see any answers or this question asked previously.

 

Any pro tips are greatly appreciated from your friend in Nashville 😁

 

Use case:

  • On the My Profile widget, we would like to show more than one line of text for some of the User Additional Fields that are displayed on the widget.
  • For example, we have a field “My Coaching Goals” where a client’s various goals would be listed.
    • this is a Text Area field (up to 65,000 characters)
    • for example, my goals are listed in this field as : “Run a 26 mile marathon, grow my team, be a leader”
    • BUT - on the widget currently, the widget displays just “Run a 26 mile maratho...”
    • A few other fields we would like to display additional rows of text include:
      • Action Items
      • My Coach’s Contact Info
      • My Initial Win

See the screenshot below (or attached PNG) for example of what we are currently seeing

 

 

 

Thanks in advance,

Ben Bauman

1 Attachment

3 replies

Bfarkas
Rank
Userlevel 7
Badge +3

So this one gets a little tricky for sharing. Each of those elements have a unique ID that you need to find and use for it. The good news is that the data is there, it is simply being set to hide on overflow and put ellipsis. If you change the overflow to visible, they show up, but you will probbaly need to do some adjustments on sizing and such:

If you click inspect on the data being shown, you should be brought to the element of your unique id shown underlined, and you see the overflow on the right set to hidden, I switched it to visible to see it above.

You could then add custom CSS using things like: [_ngcontent-ng-c1638402301] .value ng-star-inserted to make the actual changes.

Bfarkas
Rank
Userlevel 7
Badge +3

Actually….I did not need to play with sizes, changing the overflow and the ‘white-space’ to pre-wrap from no-wrap took care of it:

So when I inspected on the text….it brings you to that span down below, the actual change that needs to happen is on the div above it.

B
Rank
Userlevel 2
Badge

Brian, thanks as always you’re the man.

 

here’s the code i used to make those text fields show multiple lines 

 

 

[_ngcontent-ng-c1638402301] {

white-space: pre-wrap;

}

Reply


Terms & ConditionsCookie settings