Wednesday 18 January 2017

Hi Friends,

We got 2 requirement to restrict the text limit visible  in a box in Siebel Open UI .

First: Text visible in a single line and extra text to be hidden as below:

The second line is a text field which can have text length that cannot fit in the text box.So instead of getting it visible outside the text box we had to restrict the text in the box.This can easily be achieved by applying ellipsis css class.

ellipsis{width: 200px !important;
 text-overflow: ellipsis;
 white-space: nowrap;
 overflow: hidden;}

Second: Text visible in 2 lines and extra text to be hidden as below:



The second line is a text field which can have text length that cannot fit in the text box.So instead of getting it visible outside the text box we had to restrict the text in 2 lines within the box .This  I could not  achieve by applying ellipsis css class as it resricts the text in single line ad so it doesnot fulfill our requirement.So I decided to write a functiuon in our Siebel PR file.

                      var myTag = $('#des2Para1div1').text();
if (myTag.length > 80)
                            {
                                var truncated = myTag.trim().substring(0, 80) + "…";
                             $('#des2Para1div1').text(truncated);
                          }

Note: $('#des2Para1div1').text() will get the text value of the field.

By using the above function I was able to restrict the extra text within 2 lines within the box.

Your comments are most welcome on this.




No comments:

Post a Comment