mos Posted October 27, 2017 Share Posted October 27, 2017 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...' Link to comment Share on other sites More sharing options...
Sherzod Posted October 27, 2017 Share Posted October 27, 2017 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, Link to comment Share on other sites More sharing options...
mos Posted November 3, 2017 Author Share Posted November 3, 2017 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? Link to comment Share on other sites More sharing options...
mos Posted November 9, 2017 Author Share Posted November 9, 2017 Just bumping this to see if anyone ideas or has used any third party CSS/Javascript to handle this that they would recommend. Link to comment Share on other sites More sharing options...
Sherzod Posted November 10, 2017 Share Posted November 10, 2017 Hi, Need to analyze Link to comment Share on other sites More sharing options...
Sherzod Posted November 10, 2017 Share Posted November 10, 2017 Do you know in advance how many lines there will be ?! Link to comment Share on other sites More sharing options...
mos Posted November 10, 2017 Author Share Posted November 10, 2017 Yes it will just be two lines. Link to comment Share on other sites More sharing options...
mos Posted November 13, 2017 Author Share Posted November 13, 2017 Hi Delphi Developer, Just checking in to see if you have any ideas. Link to comment Share on other sites More sharing options...
Sherzod Posted November 13, 2017 Share Posted November 13, 2017 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 Link to comment Share on other sites More sharing options...
Sherzod Posted November 13, 2017 Share Posted November 13, 2017 For other browsers, need to use other solutions on JS, CSS or find a different approach... Link to comment Share on other sites More sharing options...
mos Posted November 15, 2017 Author Share Posted November 15, 2017 Hi Delphi Developer, I found some third party JQuery code that I was trying to use at this site: https://www.jqueryscript.net/text/jQuery-Plugin-For-Responsive-Multi-Line-Text-Truncating-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}); Link to comment Share on other sites More sharing options...
Sherzod Posted November 15, 2017 Share Posted November 15, 2017 Hi, Ok, I will check that Link to comment Share on other sites More sharing options...
Sherzod Posted November 15, 2017 Share Posted November 15, 2017 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, Link to comment Share on other sites More sharing options...
mos Posted November 15, 2017 Author Share Posted November 15, 2017 Hi Delphi Developer, I tried this in a test app but got the attached error. Link to comment Share on other sites More sharing options...
Sherzod Posted November 16, 2017 Share Posted November 16, 2017 Hi, Sorry, did you include fewlines.js ? Link to comment Share on other sites More sharing options...
mos Posted November 16, 2017 Author Share Posted November 16, 2017 Yes in the UniServerModule.CustomFiles I have fewlines.js Link to comment Share on other sites More sharing options...
Sherzod Posted November 16, 2017 Share Posted November 16, 2017 Please make a testcase, if it's not hard for you. Link to comment Share on other sites More sharing options...
Sherzod Posted November 16, 2017 Share Posted November 16, 2017 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 Link to comment Share on other sites More sharing options...
mos Posted November 16, 2017 Author Share Posted November 16, 2017 Attached is a test project that generates the error FewLines.zip Link to comment Share on other sites More sharing options...
Sherzod Posted November 16, 2017 Share Posted November 16, 2017 For example: 1. You need to copy fewlines.js to the directory files 2. ... CustomFiles -> files/fewlines.js Link to comment Share on other sites More sharing options...
Sherzod Posted November 16, 2017 Share Posted November 16, 2017 Try with these changes and let me know, it should work Link to comment Share on other sites More sharing options...
mos Posted November 16, 2017 Author Share Posted November 16, 2017 Thanks Delphi Developer. I was missing the "files/" in front of the FewLines.js and it now works. Link to comment Share on other sites More sharing options...
Sherzod Posted November 16, 2017 Share Posted November 16, 2017 Ok Link to comment Share on other sites More sharing options...
mos Posted November 16, 2017 Author Share Posted November 16, 2017 Hi Delphi Developer, Another question how can I actually call the FewLines.js code when the OnAjaxEvent is trigged for the label. ie. When I drag from a TUniTreeNode to the label the OnAjaxEvent triggers for the drag drop and I change the label text. When the label text changes I want to call the FewLines.js so it can ellipsis the label text if required. Link to comment Share on other sites More sharing options...
Sherzod Posted November 16, 2017 Share Posted November 16, 2017 Hi, Can you try this?!: ... UniLabel1.JSInterface.JSCode('Ext.defer(function(){$($("#"+'#1'.id)[0]).fewlines({lines:2})},50);'); ... Link to comment Share on other sites More sharing options...
Recommended Posts
Please sign in to comment
You will be able to leave a comment after signing in
Sign In Now