https://stackblitz.com/github/IgniteUI/igniteui-live-editing-samples/tree/master/angular-demos/data-display/text-highlight-1?file=src%2Fapp%2Ftext-highlight-sample-1%2Ftext-highlight-sample-1.component.html
this works fine but if text is large then the next button does not set focus to below text found user has to scroll down manually which is not the best idea.
// ... const el = document.getElementsByClassName(this.activeHighlightClass); // Scroll to active element after DOM is updated: requestAnimationFrame(() => { this.scrollIntoViewIfNeeded(el[0]); }); // ... public scrollIntoViewIfNeeded(target) { if (target?.getBoundingClientRect().bottom > window.innerHeight) { target.scrollIntoView(false); } if (target?.getBoundingClientRect().top < 0) { target.scrollIntoView(); } }
Thank you so much for the effort and time @Teodosia Hristodorova.
This code works really well for me , just a small question, will it also work if i have search n content in dialog box? and I tried to use this library in my angular 6 application and I am getting a lot of errors while running build, is it not compatible for angular 6?
Hello,
As I previously mentioned the IgxTextHighlight directive is used to highlight parts of a text. Scrolling to the highlighted element to a certain position should be handled on the application level. For the purposes of the example the previously attached sample is scrolling in the window, however, you could implement a similar approach for dialog. A possible approach could be found here.
Regarding your second question, Angular 6 is not compatible with igniteui-angular 11.1.0. In case you are using angular 6 you should need to use igniteui-angular 6.x.x, however, please keep in mind that according to our policy support is applicable to two versions back - the latest stable and the previous major version. The current LTS is 11.1.0, which means that support is also applicable to 10.2.x.
Let me know if I may be of any further assistance.
Sincerely,
Teodosia Hristodorova
Associate Software Developer
Wow, That idea is great