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

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

SOLVED
mwodarz_INNEO
Amethyst

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)
1 ACCEPTED SOLUTION

Accepted Solutions

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

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

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

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

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

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
Join an
AR Working Group!

Topics available:
AR/VR for Data Optimization AR/VR for Security and Control AR/VR for Inspection