CSS changes not reflicting inside the Modal

GhitaB · a month ago

i'm trying to style one message inside a modal pop up in the service scriptbut seems like the changes are not reflicting

CUSTOM_MESSAGE:"<p class='custom-msg' please use this <a href='google.com'>Link</a></p>",

and in the controller this is what i have:

	var modalParam = {
			message: $sce.trustAsHtml($scope.data.i18n.CUSTOM_MESSAGE_ISOLV),
			
		};

.custom-msg {
color: red !important;
}

how can i let the changes to be visible on the modal.

MaxMixali · a month ago

Verification:

Modal rendering context: spModal renders in a separate DOM context outside the widget's scope
CSS isolation: Widget CSS is scoped and won't apply to modal content
Actual solution needed: Inline styles in the HTML string itself

Correct solution:

javascript

CUSTOM_MESSAGE: "<p style='color: red;'>please use this <a href='google.com'>Link</a></p>",

The modal content is rendered outside your widget's CSS scope, so you must use inline styles directly in the HTML string. Widget CSS classes won't apply to spModal content. Hope that can Help

View solution in original post

GhitaB · a month ago

i ve tried it but it didn t work as well