cancel
Showing results for 
Search instead for 
Did you mean: 
cancel
Showing results for 
Search instead for 
Did you mean: 

Community Tip - Help us improve the PTC Community by taking this short Community Survey! X

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

mwodarz_INNEO
14-Alexandrite

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

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

(Presales) Senior Technical Consultant @ INNEO Solutions GmbH (Germany)
ACCEPTED SOLUTION

Accepted Solutions
lgherman
14-Alexandrite
(To:mwodarz_INNEO)

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

View solution in original post

2 REPLIES 2
lgherman
14-Alexandrite
(To:mwodarz_INNEO)

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
14-Alexandrite
(To:lgherman)

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

(Presales) Senior Technical Consultant @ INNEO Solutions GmbH (Germany)
Announcements

Top Tags