Jump to content


Photo

Adding Ellipses (...) to TUniLabel.Text If Insufficient Space


  • Please log in to reply
26 replies to this topic

#1 mos

mos

    Active Member

  • uniGUI Subscriber
  • PipPipPip
  • 72 posts

Posted 27 October 2017 - 01:34 PM

I need to be able to add trailing dots to a TUniLabel.Text if it doesn't have sufficient space to display the full label before it is clipped.

 

e.g. If I have  label text = '12345678901234567890' and label can only show ten characters than the label text should appear as '1234567...'

 

    

 


  • 0

#2 Delphi Developer

Delphi Developer

    Advanced Member

  • Moderators
  • 3450 posts

Posted 27 October 2017 - 04:31 PM

Hi,

 

One of the possible solutions:

 

1. UniLabel -> AutoSize = False

 

2. UniLabel -> ClientEvents -> UniEvents -> function beforeInit:

function beforeInit(sender, config)
{
    config.cls="ellipsisText";
 }

3. UniServerModule -> CustomCSS:

.ellipsisText {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

Best regards,


  • 0

#3 mos

mos

    Active Member

  • uniGUI Subscriber
  • PipPipPip
  • 72 posts

Posted 03 November 2017 - 04:25 AM

Hi Delphi Developer,

 

  Thanks for the code.

 

  However I need to be able to ellipsis a label that actually wraps over multiple lines.

 

  e.g.

 

      This is a test line1

       And this is test line...

 

  Do you know of a way that I can do this?


  • 0

#4 mos

mos

    Active Member

  • uniGUI Subscriber
  • PipPipPip
  • 72 posts

Posted 09 November 2017 - 11:28 PM

Just bumping this to see if anyone ideas or has used any third party CSS/Javascript to handle this that they would recommend.


  • 0

#5 Delphi Developer

Delphi Developer

    Advanced Member

  • Moderators
  • 3450 posts

Posted 10 November 2017 - 04:57 AM

Hi,

 

Need to analyze


  • 0

#6 Delphi Developer

Delphi Developer

    Advanced Member

  • Moderators
  • 3450 posts

Posted 10 November 2017 - 04:59 AM

Do you know in advance how many lines there will be ?!


  • 0

#7 mos

mos

    Active Member

  • uniGUI Subscriber
  • PipPipPip
  • 72 posts

Posted 10 November 2017 - 11:02 PM

Yes it will just be two lines.


  • 0

#8 mos

mos

    Active Member

  • uniGUI Subscriber
  • PipPipPip
  • 72 posts

Posted 13 November 2017 - 04:00 AM

Hi Delphi Developer,

 

  Just checking in to see if you have any ideas.


  • 0

#9 Delphi Developer

Delphi Developer

    Advanced Member

  • Moderators
  • 3450 posts

Posted 13 November 2017 - 05:23 AM

Hi,

 

For Webkit browsers you can use this approach:

 

1. ... CustomCSS:

._ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    height: auto !important;
}

2. UniLabel -> ClientEvents -> UniEvents -> function beforeInit:

function beforeInit(sender, config)
{
    config.cls='_ellipsis';
}

3. UniLabel -> AutoSize -> False


  • 0

#10 Delphi Developer

Delphi Developer

    Advanced Member

  • Moderators
  • 3450 posts

Posted 13 November 2017 - 05:25 AM

For other browsers, need to use other solutions on JS, CSS or find a different approach...


  • 0

#11 mos

mos

    Active Member

  • uniGUI Subscriber
  • PipPipPip
  • 72 posts

Posted 15 November 2017 - 01:20 AM

Hi Delphi Developer,

 

  I found some third party JQuery code that I was trying to use at this site: https://www.jquerysc...g-fewlines.html

 

  I have added the file fewlines.js to UniServerModule.CustomFiles.

 

  Question I have is if I want to apply this code to a TUniLabel where do I make call to fewlines and what should 'p' be ie. how do I pass the reference to TUniLabel?

 

     $('p').fewlines({lines : 4});

  


  • 0

#12 Delphi Developer

Delphi Developer

    Advanced Member

  • Moderators
  • 3450 posts

Posted 15 November 2017 - 01:46 AM

Hi,

Ok, I will check that
  • 0

#13 Delphi Developer

Delphi Developer

    Advanced Member

  • Moderators
  • 3450 posts

Posted 15 November 2017 - 06:05 AM

Hi,

 

Can you try this approach ?!:

 

1. UniLabel -> AutoSize -> False (with custom width)

 

2. UniLabel -> ClientEvents -> ExtEvents -> function afterrender:

function afterrender(sender, eOpts)
{
    var me=sender;
    $($('#'+me.id)[0]).fewlines({lines:2});
}

Best regards,


  • 0

#14 mos

mos

    Active Member

  • uniGUI Subscriber
  • PipPipPip
  • 72 posts

Posted 15 November 2017 - 11:22 PM

Hi Delphi Developer,

 

  I tried this in a test app but got the attached error.

Attached Files


  • 0

#15 Delphi Developer

Delphi Developer

    Advanced Member

  • Moderators
  • 3450 posts

Posted 16 November 2017 - 01:40 AM

Hi,

Sorry, did you include fewlines.js ?
  • 0

#16 mos

mos

    Active Member

  • uniGUI Subscriber
  • PipPipPip
  • 72 posts

Posted 16 November 2017 - 04:12 AM

Yes in the UniServerModule.CustomFiles I have fewlines.js
 


  • 0

#17 Delphi Developer

Delphi Developer

    Advanced Member

  • Moderators
  • 3450 posts

Posted 16 November 2017 - 04:26 AM

Please make a testcase, if it's not hard for you.


  • 0

#18 Delphi Developer

Delphi Developer

    Advanced Member

  • Moderators
  • 3450 posts

Posted 16 November 2017 - 04:53 AM

In which folder did you copy the fewlines.js ?

 

For example:

 

1. You copied the file to the directory files

 

2. ... CustomFiles -> files/fewlines.js


  • 0

#19 mos

mos

    Active Member

  • uniGUI Subscriber
  • PipPipPip
  • 72 posts

Posted 16 November 2017 - 04:55 AM

Attached is a test project that generates the error

Attached Files


  • 0

#20 Delphi Developer

Delphi Developer

    Advanced Member

  • Moderators
  • 3450 posts

Posted 16 November 2017 - 04:59 AM

For example:

 

1. You need to copy fewlines.js to the directory files

 

2. ... CustomFiles -> files/fewlines.js


  • 0




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users