Infragistics WebDialogWindow control is a flexible and lightweight AJAX dialog control designed to look and feel like standard Windows dialogs. One of its neat features – it allows to load the content from an external URL. In that case it renders the content inside of an IFRAME, which is all good and well, but leaves an ugly default iframe border.

Browsers like FireFox can remediate this by simple setting the “frameborder” attribute of the content pane IFRAME element:

function showDialog() {      
    var oDialog = $find('xwdwMyDialog')
    var oDialogContent = oDialog.get_contentPane();
    var oDialogIFrame = oDialogContent.get_iframe();

    // Removing IFRAME border in FireFox
    oDialogIFrame.setAttribute('frameborder', '0');

    oDialog.show();
}

but unfortunatelly this doesn’t work in IE.

Using IE Developer toolbar, I found out that if I access document loaded into the IFRAME and manually set its documentElement’s borderStyle to “none” – this also removes IFRAME borders. So I thought the following code will do the trick:

function showDialog() {      
    var oDialog = $find('xwdwMyDialog')
    var oDialogContent = oDialog.get_contentPane();
    var oDialogIFrame = oDialogContent.get_iframe();

    // Removing IFRAME border in FireFox
    oDialogIFrame.setAttribute('frameborder', '0');

    // Removing IFRAME border in IE (doesn't work)
    var oDocElem =  oDialogIFrame.contentWindow.document.documentElement;
    oDocElem.style.borderStyle = 'none';

    oDialog.show();
}

It didn’t. But when I removed the “should’ve worked” line out of context of the main function via setTimout call – it finally worked:

function showDialog() {      
    var oDialog = $find('xwdwMyDialog')
    var oDialogContent = oDialog.get_contentPane();
    var oDialogIFrame = oDialogContent.get_iframe();

    // Removing IFRAME border in FireFox
    oDialogIFrame.setAttribute('frameborder', '0');

    // Removing IFRAME border in IE (this works!!!)
    setTimeout(function() { setIFrame(oDialogIFrame) }, 1);
    oDialog.show()
}

function setIFrame(i_oIFrame) {
    var oDocElem =  i_oIFrame.contentWindow.document.documentElement;
    oDocElem.style.borderStyle = "none"
}