Truncate OR Expand Text Field / Description Field On Widget/Portal pages, Widgets.

[Pratik Malviya]

Hi All,

Recently I came across one of the requirement to have a Description Field on Idea portal where it initially show description limited to 2 lines and Once you hover over on Description field it shows full description without any line limitations.

Note - This you can use for any of this kind of requirement, I did for idea portal)

To Achieve this, I have made clone of IM Ideas widget and added below CSS style it.

.element-wraping {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  
}
.element-wraping:hover{
  overflow: visible;
  white-space: normal;
  display:block; 
  margin-left:auto; 
  margin-right: auto;
}

And Utilized this CSS class in HTML Body.

<div class="element-wraping" style="width:100%;">   
                <span ng-style="{'color': data.stateChoiceIconMap[idea.state].color, 'background-color': data.stateChoiceIconMap[idea.state].bgColor}">
                </span>
                <span><strong>Description: </strong>{{::idea.description}}</span>
              </div>
            </div>

Results:

Initially Description with limited to 2 line.

Once you hover over (Mouse hover) on Description it would show as below.

This way you can achieve on any such kind of requirement.

Please mark this as Correct/Helpful if its helps you somewhere any such kind of requirements.

Thanks & Best Regards,

Pratik Malviya.

[Annie10]

Hello @Pratik Malviya

I have a similar requirement. Could you please provide guidance on how I can achieve the same functionality as yours but on the 'My Request' widget?.  Thank you so much.

[Annie10]

Hi @Pratik Malviya  ,

I urgently need your help with the issue. Could you please provide suggestions on how I can apply the same logic to the "My Requests" widget? Thank you.

[Pratik Malviya]

Hi @Annie10 ,

I have already mentioned in above that You just need above two classes in CSS

I.e. 

.element-wraping {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  
}
.element-wraping:hover{
  overflow: visible;
  white-space: normal;
  display:block; 
  margin-left:auto; 
  margin-right: auto;
}

And

Use above classes as per your need. in My case I have added in HTML sections as,

<div class="element-wraping" style="width:100%;">   
                <span ng-style="{'color': data.stateChoiceIconMap[idea.state].color, 'background-color': data.stateChoiceIconMap[idea.state].bgColor}">
                </span>
                <span><strong>Description: </strong>{{::idea.description}}</span>
              </div>
            </div>

[Annie10]

Hello @Pratik Malviya  

This is my first time learning how to clone a widget and make changes to it.

I cloned 'My Request' and followed your suggestion to add two classes in CSS, and also included them in the HTML sections. I'm sure that I screwed up somewhere because it did not work. Could you please continue to provide help?  Thank you