Override CSS in Widget

Report · Jan 22, 2017

So for the past couple weeks I've tried every way I know how to override the "margin-left" property for the <label> tag within the Radio Widget. Through the process of reduction, it seems my issue is not referencing the iframe, but referencing an ID, Class, or HTML tag within the iframe. Since Captivate generates it's learning interactions within <iframe> tags when publishing for HTML5 output, somehow I feel like I need to reference the iframe using the ".children" argument, such as document.getElementById("#459680").children.style.marginLeft = "15px"; but I still can't seem to find a solution.

I've tried:

Adding the CSS override "!important" in the style area within the index.html file.
Breaking down and manipulating the Radio Widget files directly, but this always breaks my project.
Changing it using jQuery with "Execute JavaScript" action within Captive.
Changing it using JavaScript with "Execute JavaScript" action within Captive.
Changing it using jQuery and/or JavaScript by adding a function in the index.html file, then referencing the function in Captivate.
Changing it using a combination of jQuery by referencing the ID, then using the JavaScript argument ".setProperty" to set the overriding CSS.
I found another forum post about how to reference an iframe directly, which was helpful, but still no luck when trying to manipulate the CSS.

So if anybody has any insight on how to dive into a specific iframe and then override the CSS, you'd be really helping me out. Thanks!

Report · Jan 23, 2017

First, where and when are you trying to execute the scripts?

To reference an iFrame in CP using slide enter listeners, you need to do it with a setInterval to ensure the iframe is loaded.

If you are doing it in a JavaScript window, ensure there are no spaces or loops in the code.

Either way you must first get a reference to the iFrame using:

var myFrame = document.getElementsByTagName("iframe");

Then you need to get a reference to the actual document within the iframe, which is browser dependent:

var x = (myFrame.contentWindow || myFrame.contentDocument);

if (x.document)

{

x = x.document;

}

x.document.getElementsByTagName("INPUT")[0].setAttribute("style", "margin-left: 10px !important;");

That should get you pretty close, I haven't tested, but you have to remember that an iframe is actually another window and must be targeted that way.

Report · Jan 23, 2017

Thank you for the response. Preferably I would like to execute the JavaScript in Captivate's JavaScript window, but fully understand sometimes that's just not possible or the best solution. I would also like to execute the JavaScript on Slide Enter or the click of a button.

I was initially referencing your contributions to the Can you edit the web object iframe HTML produced by Captivate in efforts of how to reference an iFrame on a slide. I still am having an issue referencing the <label> within the Radio Button Widget.

1. I first tried adding the following suggested code in Captivate's JavaScript window. I wasn't entirely sure if I still needed to use an EventListener.

setInterval (function(){

var myFrame = document.getElementsByTagName("iframe");

var x = (myFrame.contentWindow || myFrame.contentDocument);

if (x.document) {

x = x.document;

}

x.document.getElementsByTagName("INPUT")[2].setAttribute("style", "margin-left: 10px !important;");

}, 1000);

I also tried x.document.getElementsByTagName("LABEL")[2].setAttribute("style", "margin-left: 10px !important;"); with no luck as well.

2. Next, I added the following code to the head of the index.html file, but still no luck getting the CSS override to implement.

var interfaceObj, eventEmitterObj;

window.addEventListener( 'moduleReadyEvent', function ( e ){

interfaceObj = e.Data;

eventEmitterObj = interfaceObj.getEventEmitter();

initializeEventListeners();

});

function initializeEventListeners(){

if ( interfaceObj ){

if ( eventEmitterObj ){

eventEmitterObj.addEventListener( 'CPAPI_SLIDEENTER', function ( e ){

document.addEventListener( 'DOMNodeInserted', function ( e ) {

if ( e.target.nodeName == 'IFRAME' ){

interval = setInterval( modCSS, 1000, e );

}

});

}

function(modCSS){

var frame = document.getElementsByTagName( 'iframe' );

var x = (myFrame.contentWindow || myFrame.contentDocument);

if (x.document) {

x = x.document;

}

x.document.getElementsByTagName("LABEL")[2].setAttribute("style", "margin-left: 10px !important;");

}

</script>

I also tried calling the function modCSS(); from Captivate's JavaScript window on Slide Enter.

3. This is the function for getting the iFrame within the radiobutton.js file when I unpack the widget. Somehow I feel like this has something to do with being able to override the styling of the <label>, and my initial reasoning of needing to use the .children argument. If I modify the radiobutton.js or the radiobutton_oam.xml files directly, package it as a .wdgt again, then insert in my project, when previewing or publishing, it breaks my project.

function getWidgetIFrame(){

var cpWidget = window.parent.document.getElementsByClassName("cp-widget");

for(i=0;i<cpWidget.length;i++){

for(j=0;j<cpWidget.children.length;j++){

if(cpWidget.children.children[0] != undefined){

if(cpWidget.children.children[0].contentDocument.getElementById("radiobuttonwdgt") != null){

myWidgetiFrame = window.name;

return window.parent.document.getElementById(window.name);

}

Further reading the radiobutton.js file Captivate is styling the <label> as follows:

var elem = document.getElementById( 'description_div' );

var insideElem = elem.getElementsByTagName("label");

var inputElem = elem.getElementsByTagName("input");

inputElem.style.marginLeft = "15px"; //the actual radio button.

insideElem.style.verticalAlign = "middle"; //I want to add a marginLeft="15px"

I wonder if using those variables (if it's even possible) might be part of the solution.