Skip to main content

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

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.

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.

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;

}

Well something changed in the past 8 months, and now this text in the My Profile widget no longer wraps.

I reconnected with Brian Farkas and tried this CSS code, but still not working. If anyone has ideas, would be all ears!

 

 

.valueu_ngcontent-ng-c2886394166] {

white-space: pre-wrap;

overflow: auto;

text-overflow: clip;

}

 

 

 

text is truncated (Action Items, My Coaching Goals fields, etc.)

 

and when manually editing the CSS in DevTools, i can make the text wrap like the picture below:

 

 

 

Reply


Terms & ConditionsCookie settings