Override CSS in Widget

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.

<script>

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.