turns out it was a cross domain issue. When I load the page in to a blank.html on the same domain it works.

Wow if I knew more of what you were looking for I could help but this code is very very large.

Here is how I create the image you see on the left.

 igniteui.prototype.createDataSheet = function (  inWidth, inHeight, newData, header, rowHeader, name, Xnorm, Ynorm, minXnorm,maxXnorm,minYnorm,maxYnorm, type, node )
    {

        if ( id  > 998) alert("Error: Too many windows open, please close unused windows!")
        var id = this.windows.length;
        var theme = document.getElementById( 'themeSelector' ).options[document.getElementById( 'themeSelector' ).selectedIndex].text;//get the current theme selection.
       
        var inX = _startWindowPositionX + ( this.xOffset * this.windowPos );
        var inY = _startWindowPositionY + ( this.yOffset * this.windowPos );
        this.windowPos ++;
        if ( this.windowPos > 15 ) this.windowPos = 0;


        var win = document.createElement( 'div' );
        win.setAttribute( 'id', 'myWindow' + id );
        win.setAttribute( 'data-minwidth', '75' );
        win.setAttribute( 'data-minheight', '50' );
        win.setAttribute( 'class', 'boxFlat_' + theme  );
        win.setAttribute( 'style', ' z-index:' + Number( id + 100 ) );
        $( win ).mousedown( function ( e ) { _iUI.swapDepthToFront( win ); } )//needs to be fired only wen not clicking buttons, buttons stop the event bubble.

        var bar = document.createElement( 'div' );
        bar.setAttribute( 'id', 'myBar' + id );
        bar.setAttribute( 'class', 'handle bar_' + theme );
        bar.style.overflow = "hidden";
        bar.style.whiteSpace = "nowrap";
        bar.style.mozBoxShadow = "inset 0px -1px 22px #222222"
        bar.style.webkitBoxAhadow  = "inset 0px -1px 22px #222222";
        bar.style.boxShadow = "inset 0px -1px 22px #222222";

        bar.ondblclick = function () { _iUI.fullScreenToggle( ); }
        bar.innerHTML = '<h2 class="handle">' + name + '</h2>';
        win.appendChild( bar );
        _currentWindowElementActive = win;


        var content = document.createElement( 'div' );
        content.setAttribute( 'id', 'myContent' + id )
        content.setAttribute( 'class', 'contents_' + theme )
        content.setAttribute( 'style', 'overflow: hidden;white-space: nowrap;' );
        win.appendChild( content );

        /* - idea for a font slider but ut has some issues.
        var contentSlider = document.createElement( 'div' );
        contentSlider.setAttribute( 'id', 'myContentFontSlider' )
        alert( content.offsetWidth )
        contentSlider.setAttribute( 'style', 'position:absolute; left:50px; bottom:20px; width:20px; ' )
        content.appendChild( contentSlider );
        $( contentSlider ).slider( {
            min: 10,
            max: 20,
            slide: function ( event, ui )
            {
                content.style.fontSize = ui.value + "px"
            }
        } );
        */


        //tab pages
        var headerTXT = document.createElement( 'div' );//grid
        headerTXT.setAttribute( 'id', 'gridLayer' + id );
        //http://caniuse.com/transforms3d
        var transform = 'rotate(90deg) translate( 0px,' + ( -10 + rowHeader.visualLengthWidth() * .55 ) + 'px )';// 55 Works well
        var style =
            'position:absolute;top:45%;white-space: nowrap;' +
            '-sand-transform:' + transform + ';' +
            '-ms-transform:' + transform + ';'+
            '-webkit-transform:' + transform + ';'+
            '-moz-transform:' + transform + ';'+
            '-o-transform:' + transform + ';' +
            'filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);' + //IE is a pian!
            'display: block;';

        headerTXT.innerHTML = "<font size='4' color='black'>" + header + "</font><br><table><tr><td width='20px' > <label style='" + style + "'  id='rowHeader" + id + "' > " + "<font size='4'  color='black'>" + rowHeader + "</lable> </td><td>" + "<div id='myDiv" + id + "' />" + "</td><td width='15px'></td></tr><tr height='20px'></tr></table><br><br>";

        content.appendChild( headerTXT );
       
        //info
        var infoTxt = document.createElement( 'div' );
        infoTxt.setAttribute( 'id', 'infoLayer' + id );
        
        var HTMLtext = "<table border = '0'><tbody";

        if ( name ) HTMLtext += "<tr><td></td><td><br><p style='color:black; font-size:15px; text-align: left;' > " + name + " </p><br></td></tr>";

        HTMLtext += "<tr>";
        if ( minXnorm ) HTMLtext += "<td><p style='color:black ;text-align: left;' > X Minimum Value:   <span style='color:red';>" + minXnorm + "</p></td>";
        if ( maxXnorm ) HTMLtext += "<td><p style='color:black ;text-align: left;' > X Maximum Value:  <span style='color:green';>" + maxXnorm + "</p></td>";
        if ( Xnorm ) HTMLtext += "<td><p style='color:black ;text-align: left;' > X Normalizer:    <span style='cursor:pointer; color:blue; ' onclick=' _iUI.treeClick(" + "&#34;" + Xnorm + "&#34;" + ");' >" + Xnorm + " </p></td>";
        HTMLtext += "</tr>";
          
        HTMLtext += "<tr>";
        if ( minYnorm ) HTMLtext += "<td><p style='color:black ;text-align: left;' > Y Minimum Value:  <span style='color:red';>" + minYnorm + "</p></td>";
        if ( maxYnorm ) HTMLtext += "<td><p style='color:black ;text-align: left;' > Y Maximum Value:  <span style='color:green';>" + maxYnorm + "</p></td>";
        if ( Ynorm ) HTMLtext += "<td><p style='color:black ;text-align: left;' > Y Normalizer:    <span style='cursor:pointer; color:blue; ' onclick=' _iUI.treeClick(" + "&#34;" + Ynorm + "&#34;" + ");' >" + Ynorm + " </p></td>";
        HTMLtext += "</tr>";

        if ( header ) HTMLtext += "<tr><td><br><p style='color:blue ;text-align: left;' >  INFO:   n/a </p></td></tr>";

        infoTxt.innerHTML = HTMLtext;

        $( this.infoBox.getContent() ).find( "*" ).remove();
        
        content.appendChild( infoTxt );//put on windows so it can be accessed later.
        
        $( infoTxt ).clone().attr( 'id', 'cloned info' ).appendTo( this.infoBox.getContent() );//make copy on the info bar
       
        $( infoTxt ).hide();//hide the window version.

        //I think this should use a form tag and make a server call to get the acurate data and calc based on that. This will also give back the autocomplete.
        var contentValue = document.createElement( 'div' );
        contentValue.setAttribute( 'id', 'myContentValueHolder' )
        contentValue.setAttribute( 'title', 'type in any equation Enter to apply' )
        contentValue.setAttribute( 'rel', 'tooltip' )
        contentValue.setAttribute( 'style', 'color: #000;  position:absolute; left:5px; bottom:10px; width:20px; ' )
        contentValue.innerHTML = "Value ";
        headerTXT.appendChild( contentValue );
        var contentValueBox = document.createElement( 'input' );
        contentValueBox.setAttribute( 'id', 'myContentValue' + id )
        contentValueBox.setAttribute( 'type', 'text' )
        contentValueBox.setAttribute( 'name', 'Input' )
        contentValueBox.setAttribute( 'placeholder', 'No data selected' )
        contentValueBox.onkeyup = function ( e )
        {
            if ( e.keyCode == 13 || e.which == 13 )
            {
                _iUI.windows[id].window.sendValueToActiveCell( eval( document.getElementById( "myContentValue" + id ).value ) )
            }
        }
        contentValue.appendChild( contentValueBox );

        //chart
        var chartDisp = _iUI.createChart( content, inWidth - 40, inHeight - 80, newData, rowHeader, header, type, id, name );
        $(chartDisp.getUIDiv()).hide( );

        //window controls
        var toolBar = document.createElement( 'div' );
        toolBar.setAttribute( 'id', 'myToolBar' + id )
        toolBar.setAttribute( 'class', 'toolbar_'+ theme  )
        toolBar.setAttribute( 'style', 'background-image:none' );//over ride
        
        bar.appendChild( toolBar );

        var slider = document.createElement( 'div' );
        slider.setAttribute( 'id', 'mySlider' + id )
        slider.setAttribute( 'class', 'handle resize' )
        slider.innerHTML = ' //';
        win.appendChild( slider );

        var closer = document.createElement( 'div' );
        closer.setAttribute( 'id', 'myCloser' + id )
        closer.setAttribute( 'class', 'closer' )
        //clloser.setAttribute( 'title', "Close" );//cant use this or the ttip sya on the screen
        //closer.setAttribute( 'rel', 'tooltip' )
        $( closer ).mousedown( function ( e ) { _iUI.remove( id );  } )
        closer.innerHTML = '<img src="../../SCT/images/icons/32x32/cross.png" >';
        toolBar.appendChild( closer );

        var restore = document.createElement( 'div' );
        restore.setAttribute( 'id', 'myRestor' + id )
        restore.setAttribute( 'class', 'restore' )
        restore.setAttribute( 'title', "Fit to Screen Toggle" );   
        restore.setAttribute( 'rel', 'tooltip' )
        restore.innerHTML = '<img src="../../SCT/images/icons/32x32/browser-inbrowser.png" >';
        $( restore ).mousedown( function ( e ) { _iUI.fullScreenToggle( ); } )
        toolBar.appendChild( restore );

        var superFS = document.createElement( 'div' );
        superFS.setAttribute( 'id', 'mySFr' + id )
        superFS.setAttribute( 'class', 'superFS' )
        superFS.setAttribute( 'title', "Fullscreen Toggle" );
        superFS.setAttribute( 'rel', 'tooltip' )
        superFS.innerHTML = '<img src="../../SCT/images/icons/32x32/screen.png" >';
        $( superFS ).mousedown( function ( e ) { _iUI.fullScreenToggle( true); } )
        toolBar.appendChild( superFS );

        var crop = document.createElement( 'div' );
        crop.setAttribute( 'id', 'myCropper' + id )
        crop.setAttribute( 'class', 'crop' )
        crop.setAttribute( 'title', "Crop" );
        crop.setAttribute( 'rel', 'tooltip' )
        crop.innerHTML = '<img src="../../SCT/images/icons/32x32/crop.png" >';
        $( crop ).mousedown( function ( e ) { _iUI.crop( id ); } )
        toolBar.appendChild( crop );
        
        var down = document.createElement( 'div' );
        down.setAttribute( 'id', 'myDown' + id );
        down.setAttribute( 'class', 'down' );
        down.setAttribute( 'title', "Restore" );
        down.setAttribute( 'rel', 'tooltip' )
        down.innerHTML = '<img src="../../SCT/images/icons/32x32/down.png" >';
        $( down ).mousedown( function ( e )
        {
            win.style.zIndex = Number( win.style.zIndex) + 100 ;//place in front
            win.style.visibility = "visible";
            toolBar.style.visibility = "visible";
            down.style.visibility = "hidden";
            up.style.visibility = "visible";
            return false;//needed or it send the click to the swapdepths and this messed up the araging layers.
        })
        down.style.visibility = "hidden";
        toolBar.appendChild( down );

        var up = document.createElement( 'div' );
        up.setAttribute( 'id', 'myUp' + id );
        up.setAttribute( 'class', 'up' );
        up.setAttribute( 'title', "Minimize" );
        up.setAttribute( 'rel', 'tooltip' )
        up.innerHTML = '<img src="../../SCT/images/icons/32x32/up.png" >';
        $( up ).mousedown( function ( e )
        {
            win.style.zIndex = Number( win.style.zIndex) - 100 ;//place in the back
            win.style.visibility = "hidden";
            toolBar.style.visibility = "hidden";
            bar.style.visibility = "visible";
            down.style.visibility = "visible";
            up.style.visibility = "hidden";
            return false;//needed or it send the click to the swapdepths and this messed up the araging layers.
        })
        toolBar.appendChild( up );

        var pin = document.createElement( 'div' );
        pin.setAttribute( 'id', 'myPinner' + id )
        pin.setAttribute( 'class', 'pin' )
        pin.setAttribute( 'title', "Pin Window" );
        pin.setAttribute( 'rel', 'tooltip' )
        pin.innerHTML = '<img src="../../SCT/images/icons/32x32/anchor.png" >';
        $( pin ).mousedown( function ( e ) { _iUI.pin( win );  } );
        toolBar.appendChild( pin );

        var locked = document.createElement( 'div' );
        locked.setAttribute( 'id', 'myLock' + id )
        locked.setAttribute( 'class', 'lock' )
        locked.setAttribute( 'title', "Lock data" );
        locked.setAttribute( 'rel', 'tooltip' )
        locked.innerHTML = '<img src="../../SCT/images/icons/32x32/locked.png" >';
        $( locked ).mousedown( function ( e ) { classPtr = _iUI.windows[id].window; classPtr.lock(); } );
        toolBar.appendChild( locked );

        var out = document.createElement( 'div' );
        out.setAttribute( 'id', 'myOut' + id )
        out.setAttribute( 'class', 'out' )
        out.setAttribute( 'title', "pop out" );
        out.setAttribute( 'rel', 'tooltip' )
        out.innerHTML = '<img src="../../SCT/images/icons/32x32/out.png" >';
        $( out ).mousedown( function ( e ) {  _iUI.popOut( win, _iUI.windows[id] ); } );
        toolBar.appendChild( out );

        //indicator lights
        var LED1 = document.createElement( 'div' );
        LED1.innerHTML = " "
        LED1.setAttribute( 'id', 'led1_' + id )
        LED1.setAttribute( 'title', "Indicates a change in data" );
        LED1.setAttribute( 'rel', 'tooltip' )
        LED1.setAttribute( 'style', 'position:absolute; bottom:10px; left:10px; width:15px; height:15px; z-index:' + Number( id + 101 ) + '; background-size:cover; background-image:url("../../SCT/images/GreenLEDOff.png");' );
        win.appendChild( LED1 );
        this.changeLED1 = LED1;
        var LED1_text = document.createElement( 'div' );
        LED1_text.setAttribute( 'style', 'color: #000; position:absolute; bottom:10px; left:25px; z-index:' + Number( id + 101 ) + ';' )
        LED1_text.innerHTML = " Changed";
        win.appendChild( LED1_text );

        var LED2 = document.createElement( 'div' );
        LED2.innerHTML = " "
        LED2.setAttribute( 'id', 'led2_' + id )
        LED2.setAttribute( 'title', "Ddata locked" );
        LED2.setAttribute( 'rel', 'tooltip' )
        LED2.setAttribute( 'style', 'position:absolute; bottom:10px; left:65px; width:15px; height:15px; z-index:' + Number( id + 101 ) + '; background-size:cover; background-image:url("../../SCT/images/RedLEDOff.png");' );
        win.appendChild( LED2 );
        this.changeLED2 = LED2;
        var LED2_text = document.createElement( 'div' );
        LED2_text.setAttribute( 'style', 'color: #000; position:absolute; bottom:10px; left:80px; z-index:' + Number( id + 101 ) + ';' )
        LED2_text.innerHTML = " Locked";
        win.appendChild( LED2_text );

        //tabs
        var grid = document.createElement( 'div' );
        grid.setAttribute( 'id', 'grid_button' + id )
        grid.style.position = 'absolute';
        grid.style.bottom = "7px";
        grid.style.left = "120px";
        grid.setAttribute( 'class', 'tab' )
        grid.innerHTML = 'Main';
        grid.onclick = function () { _iUI.hideAllTabsBut( "grid", content, headerTXT, id ); };
        win.appendChild( grid );

        var chart = document.createElement( 'div' );
        chart.setAttribute( 'id', 'chart_button' + id )
        chart.style.position = 'absolute';
        chart.style.bottom = "7px";
        chart.style.left = "180px";
        chart.setAttribute( 'class', 'tab' )
        chart.innerHTML = 'Chart';
        chart.onclick = function () { if ( type != "Scalar" ) _iUI.hideAllTabsBut( "chart", content, chartDisp.getUIDiv(), id ); _iUI.windows[id].chartGraph.chart2d(); };
        win.appendChild( chart );

        var chart3d = document.createElement( 'div' );
        chart3d.setAttribute( 'id', 'chart3d_button' + id )
        chart3d.style.position = 'absolute';
        chart3d.style.bottom = "7px";
        chart3d.style.left = "240px";
        chart3d.setAttribute( 'class', 'tab' )
        chart3d.innerHTML = 'Chart 3D';
        chart3d.onclick = function () { _iUI.hideAllTabsBut( "chart3d", content, chartDisp.getUIDiv(), id ); _iUI.windows[id].chartGraph.chart3d(); };
        win.appendChild( chart3d );

        //this div basicaly allows you to see the entire window when page scroling. Since the info box covers up the end, we just add padding to the end.
        var scrollFix = document.createElement( 'div' );
        scrollFix.setAttribute( 'id', 'scrollFix' )
        scrollFix.style.position = 'absolute';
        scrollFix.style.bottom = "-"+(this.infoBox.barHeight - 100 )+"px";
        scrollFix.innerHTML = '<BR>';
        win.appendChild( scrollFix );

        document.body.appendChild( win );
        var myDiv = $( '#myDiv' + id );
        var ptr;

        if ( newData ) ptr = new dataSheet( rowHeader, header, myDiv, inX, inY, inWidth, inHeight, win, slider, closer, id, newData, name, type );
        else ptr = new dataSheet( rowHeader, header, myDiv, inX, inY, inWidth, inHeight, win, slider, closer, id, this.data, type );
        this.windows.push( { "windowDiv": myDiv, "window": ptr, "id": id, "element": win, "content": content, "elementsBar": bar, "toolBar": toolBar, "treeNode": node, "chartGraph": chartDisp } );
        $( document.getElementById( "mySearchBar" ) ).trigger( "mousedown" );//not sure why this was done, its not needed afaict

        _currentWindowPinned = ptr;

        chartDisp.setData( ptr.getChartHeaderData() )
        chartDisp.draw();//draws the defult 2d map

        if ( type == "Function" ) chart3d.style.visibility = 'hidden';
        if ( type == "Scalar" )  chart.style.visibility = chart3d.style.visibility = 'hidden';

        if ( _compactMode )//hide after loading data for phone mode
        {
            document.getElementById( 'tree' ).style.visibility = 'hidden';
            $( _currentWindowElementActive ).find( "#myToolBar0" )[0].style.visibility = 'hidden'
            $( _currentWindowElementActive ).find( "#myCloser0" )[0].style.visibility = 'visible'
            $( _currentWindowElementActive ).find( "#myCloser0" )[0].style.top = 0;
            document.getElementById( 'mySearchBar' ).style.visibility = 'hidden';
            document.getElementById( 'myFontSlider' ).style.visibility = 'hidden';
            _currentWindowElementActive = win;
            _iUI.fullScreenToggle( true );
            bar.ondblclick = function () { };
            $( window ).resize();
        }
        _iUI.swapDepthToFront( win );
        return ptr;
    };

The code to make the image on the right is in my first post. HERE is the full function.

igniteui.prototype.popOut = function ( win, dsWindow )
    {
        $( win ).unbind( 'mousedown' );//clear existing.
        $( win ).mousedown( function ( e ) {_currentWindowPinned = dsWindow.window } )//needs to be fired only wen not clicking buttons, buttons stop the event bubble.

        var linkrels = document.getElementsByTagName( 'link' );
        var strWindowFeatures = "menubar=yes,location=no,resizable=no,scrollbars=no,status=yes,width=500,height=400";
        newWindow = window.open( "about:blank", "", strWindowFeatures, false );
        newWindow.onload = function ()
        {
            for ( var i = 0, max = linkrels.length; i < max; i++ )
            {
                //copy in styles.
                if ( linkrels[i].rel && linkrels[i].rel == 'stylesheet' )
                {
                    
                    var thestyle = document.createElement( 'link' );
                    var attrib = linkrels[i].attributes;
                    for ( var j = 0, attribmax = attrib.length; j < attribmax; j++ )
                    {
                        thestyle.setAttribute( attrib[j].nodeName, attrib[j].value );
                    }
                    newWindow.document.documentElement.appendChild( thestyle );

                    
                }
            }

            this.focus( true );
            popWin = this.document.body.appendChild( win );// copy in div
            popWin.style.top = 0;
            popWin.style.left = 0;
            win.id = -1;
            dsWindow.window.setPopOut( true );
            $( popWin ).width( newWindow.innerWidth + 35 );
            $( popWin ).height( newWindow.innerHeight );
            newWindow.onresize = function()
            {
                $( popWin ).width( newWindow.innerWidth + 35 );
                $( popWin ).height( newWindow.innerHeight );
                dsWindow.window.updateWindowSize( $( popWin ).width(), $( popWin ).height(), false );//update grid display
            }
            
         

        };

    }

Are you thinking the font is getting large because of some kind of inheritance?

Hi Sean,

Can you provide more details/code that demonstrates how you are generating the second window and applying the CSS to the igGrid inside of it? These details will give me a better understanding of your environment and allow me to investigate this issue further.

Also, do you have any inline styles being applied to either of these controls or their containers?

I am looking forward to hearing from you.

maybe a image would help?

My issue is the grid only. The fount size is all messed up. The one on the left is correct, the copied is on the right.