Skip to main content
M
mwodarz_INNEO14-Alexandrite
14-Alexandrite
November 13, 2020
Solved

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

  • November 13, 2020
  • 1 reply
  • 3217 views

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

Best answer by lgherman

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

1 reply

L
lgherman14-AlexandriteAnswer
14-Alexandrite
January 18, 2021

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

    M
    mwodarz_INNEO14-AlexandriteAuthor
    14-Alexandrite
    January 27, 2021

    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

      Terms & ConditionsAccessibility statement