Change CSS class within textarea to mark a part of the text

[mwodarz_INNEO]

Hello Community.

I'm searching for a solution to change the CSS class of text parts. The goal is to get marked text parts within the textarea widget.

In my current test experience, the textarea widget is driven by a parameter

$scope.app.params.input = "textarea with marked text";

And I defined the CSS classes

strong {
 font-weight: bold;
 background-color: yellow;
}

textarea {
  color: blue;
  font-family:"Times New Roman", Times, serif;
//  font-size: 1em;
}

How the get the "marked" text part in CSS class 'strong'?

Thanks for your help

Cheers

Marco

[lgherman · Accepted solution]

Hello  Marco,

A solution could be the following:

$scope.init = function() {
  // set content of label-1 with HTML
  $scope.setHTML('label-1', "textarea with <span class=\"strong\">marked text</span>");
}

angular.element(document).ready($scope.init);


$scope.setHTML = function(labelid, html) {
    var labeldiv = document.querySelector("*[widget-id='" + labelid + "'] div");
    labeldiv.innerHTML = html;
}

Please refer to this post for more information:  https://community.ptc.com/t5/Vuforia-Studio/HTML-content-in-widgets/m-p/579436/highlight/true#M4552

Kind regards,

Lorena Gherman

[mwodarz_INNEO]

Hello Lorena.

Thanks for posting this solution. This works perfekt for my experience.

Attached a very simple example experience for new users (as we all started some day)

Cheers

Marco