Full width element inside nested bootsrtap 3 grid and angular directive

I have angular app that is using Bootstrap 3 and Angular UI for layout control.

I want to have a particular element fit to the full width of the browser. This element lives inside a bootstrap grid (col-xx), which is itself inside an angular directive, which is placed inside another bootstrap grid, which is inside a Angular UI tab, which is inside another grid. I think you get the idea.

What is the correct CSS to get my element to be the full browser width ? The width of the parent of the element is only a fraction of the screen width, but I need this particular div to override everything because I need maximum real estate (trying to show a gantt chart).

The effect I am trying for is similar to the current google image search feature when you click on a particular image and the bar expand across the full screen.

Apologies if the question is a bit unclear. I may need to add some code.

You'll have to use position: fixed to take it out of the document flow, otherwise using width:100% will always refer to it taking up 100% of the width of it's parent container.

Add the class fullWidth and style like this:

<!-- language: lang-css -->

.fullWidth {
    position: fixed;
    left: 0;
    right: 0;
}

Here's a Demo in jsFiddle