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
Solved! Go to 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
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
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