Skip to content

AB#112755 - Overlap text fix while exporting dashboards #2786

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: next
Choose a base branch
from
Open

AB#112755 - Overlap text fix while exporting dashboards #2786

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
44d4e01
Overlap text fix + Retain colour of text on paste
HasnatL-Adapptlimited Apr 17, 2025
4e26c0c
Merge branch 'next' into AB#112755-html-text-export-fix
AntoineRelief Apr 23, 2025
31035e6
merge next
AntoineRelief Apr 23, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 23 additions & 2 deletions ...ed/src/lib/components/widgets/common/html-widget-content/html-widget-content.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Component, ElementRef, Input } from '@angular/core';
import { AfterViewInit, Component, ElementRef, Input } from '@angular/core';
import { SafeHtml } from '@angular/platform-browser';

/**
Expand All @@ -13,7 +13,7 @@ import { SafeHtml } from '@angular/platform-browser';
// todo: enable
// encapsulation: ViewEncapsulation.ShadowDom,
})
export class HtmlWidgetContentComponent {
export class HtmlWidgetContentComponent implements AfterViewInit {
/**
* HTML to render
*/
Expand All @@ -29,4 +29,25 @@ export class HtmlWidgetContentComponent {
* @param {ElementRef} el Element reference
*/
constructor(public el: ElementRef) {}

/**
* Script to fix bulletin and announcement text overlapping issue
*/
ngAfterViewInit(): void {
// Find the element with the class "text-overlapping-fix"
const overlappedElement: HTMLElement | null =
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@HasnatL-Adapptlimited
I don't think that's a valid solution because it limits the fix to the specific use case you build the fix for
using a class like that that the end user has to put in the html seems quite weird to me

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is a very specific use case for EIS or any applications using the HTML-text-widget and importing data with MS-word styling.

Do you have any other suggestions for how this can be fixed without hindering other websites in the app builder? as its a very specific ( style paste/ import) issue

Also is there anyway to please set up a call and I can show you how it looks from my side (to try and replicate the overlapping issue) or maybe we can try and compare what is different from my screen and your screen? as I'm not sure why you can't replicate it from your side.

CC: @SafiMohammed

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

hey @HasnatL-Adapptlimited

I can be available tomorrow morning, starting from 9.30am CEST, all the morning
If that works for you I'll let you send a meeting link

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey @AntoineRelief scheduled a meeting for 11:00 CEST just seen you accepted, thanks!

this.el.nativeElement.querySelector('.text-overlapping-fix');

// If the element exists, remove all inline styles from its children
if (overlappedElement) {
// Find all elements with the "style" attribute
const elementsWithStyle: NodeListOf<HTMLElement> =
overlappedElement.querySelectorAll<HTMLElement>('[style]');

// Iterate over the elements and remove the "style" attribute
elementsWithStyle.forEach((element: HTMLElement) => {
element.removeAttribute('style');
});
}
}
}