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.

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.