grid visual artifact within modal when width is 100%

[longshot5112]

I have a modal which contains a grid which should be 100% of the modal width. Upon initial loading of the modal, there is a visual artifact of the grid beyond the boundary of my modal. If I re-size my browser window, the artifact will disappear and the grid will "snap" in place where it should be and start obeying the 100% width boundary of my modal window.

This only seems to happen when loading a grid in a modal. My primary grid on the main page is set to width: 100% and has no issue.

Initial load:

After resizing:

This is the CSS I have for the grid:

Hey actually this issue is part of ui-view-port directive, as a part of workaround replace ui-grid div with following code.
<div ui-grid="gridOpt" class="grid" style="width:85%" ng-style="getTableStyle()" <div>
Use following code on your controller.

$scope.getTableStyle= function() {
return {
width: "100%",
height:"100%"
};
};


[tony0918]

I got the same issue. And @lifinanalytics, your workaround doesn't work for me. If the parent container's width has been set by %, Grid cannot get the correct width of parent container's width. When resizing occurs, because of parent container won't be rendered again, Grid can get correct width.
Any other solution or ETA?
Thanks.

[httpete]

Do this after setting data, as a workaround.

window.dispatchEvent(new Event('resize'));

@tony0918 it worked very well for me ,actually was facing issue on displaying ui-grid under angular ui-tabs where i was reloading the grid data on some ui events but on every time the data refresh happens grid used to go out of the container specified, after this fix and it works well even on window resize.
So coming to your issue with % size it is required to have parent width set before child can render , So there is no way you can render the table without setting parent width and height. All i suggest you to work on your source code somehow to render the parent before rendering ui-grid.

@httpete your solution is not consistent , even though you trigger resize event in some cases it doesn't work like mine in where am displaying grid in multiple tabs where ui-grid resize event won't get triggered due out of view port.

[tony0918]

Thanks @lifinanalytics. Could you please share me some code to manage the rendering order?

[httpete]

        /* This is the grid hack to fix the bad layout in all browsers */
        setTimeout(function(){
            var evt = document.createEvent('UIEvents');
            evt.initUIEvent('resize', true, false,window,0);
            window.dispatchEvent(evt);
        }, 100);

[c0bra]

If someone could throw together a quick plunker for this that would make it a lot easier to provide a fix.

[c0bra]

OK I made a plunker: http://plnkr.co/edit/PLqG0GeD1iAredRARp8K?p=preview