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...' Quote 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, Quote 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? Quote 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. Quote Link to comment Share on other sites More sharing options...
Sherzod Posted November 10, 2017 Share Posted November 10, 2017 Hi, Need to analyze Quote 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 ?! Quote 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. Quote 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. Quote 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 Quote 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... Quote 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}); Quote 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 Quote 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, Quote 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. Quote 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 ? Quote 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 Quote 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. Quote 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 Quote 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 Quote 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 Quote 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 Quote 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. Quote Link to comment Share on other sites More sharing options...
Sherzod Posted November 16, 2017 Share Posted November 16, 2017 Ok Quote 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. Quote 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);'); ... Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.