CSS Component Generates $.anwidget Error

Hi.

I'm not sure of why this conflict is happening, but using a publish template to handle CSS and lots of other stuff is way easier than relying on that component, IMHO.

You just need to:

- Go to the Publish Settings (Ctrl/Cmd + Shift + F12) > JavaScript/HTML > HTML/JS > Export to export the default publish template;

- Open the publish template (an html file) in a code editor;

- Add a link or style tag:

<link rel="stylesheet" href="style.css">

- Save it;

- Import it back to Animate in the same tab in the Publish Settings.

Now you can style the text inputs or anything else the way you wish.

I hope this helps.

Regards,

JC 

it's easier to use javascript to create and control "components "

function createComponentF(id, html,css) {
    var d = document.createElement("div");
	d.display = "inline-block";
    d.id = "containerDIV_"+id;
	d.innerHTML = html;
	//canvas.parentNode.appendChild(d); // place on top
	// the following places canvas on top and component below.  (make stage color transparent)
	document.getElementById("animation_container").appendChild(d);
	document.getElementById("animation_container").appendChild(canvas);
	var component = document.getElementById(id);
	component.style.cssText = css;
}
// Remove an element by ID name
removeDivF = function(id) {
    try {
        var elem = document.getElementById("containerDIV_"+id);
        elem.parentNode.removeChild(elem);
    }
    catch(e) {}
}

createComponentF("nameID",  "<input type='text' id='nameID' cols='28' placeholder='type your name'>", "color: black;  font-family: 'Frutiger LT 55 Roman', 'URW Form Medium', sans; font-size:14px; position:absolute; left: 696px; top: 193px; width: 300px; height:22px; ");

createComponentF("emailID",  "<input type='text' id='emailID' cols='28' placeholder='type your email'>", "color: red;  font-family: 'Frutiger LT 55 Roman', 'URW Form Medium', sans;  font-size:14px;     position:absolute; left: 696px; top: 243px; width: 300px; height:  22px; ");

createComponentF("messageID", "<textarea id='messageID' rows='6' cols='28' placeholder='type your message'>", "color: black;  font-family: 'Frutiger LT 55 Roman', 'URW Form Medium', sans; font-size:14px;    position:absolute; left: 696px; top: 294px; width: 300px; height: 195px; ");