Maximize div in ng-app [closed]

Question

Closed. This question needs details or clarity. It is not currently accepting answers.

---

Want to improve this question? Add details and clarify the problem by editing this post.

Closed 8 years ago.

Improve this question

There are several similar questions in the stack, but none of them seems helpful. I'm looking for the right way (I would say ng-way) how to maximize the div. The best example in my case is ZEN mode on Github: https://github.com/angular/angular.js/issues/new#fullscreen_issue_body

I have a bootstrap row with ng-repeat inside:

<div class="row">
    <div ng-repeat="widget in factory.getStack()" class="col-md-4">
        <div class="panel panel-default">
            <div class="panel-heading clearfix">
                <h5 class="panel-title pull-left">{{widget.title}}</h5>
            </div>
        </div>
        <div class="panel-body">
            <div ng-include src="widget.uri"></div>
            <button ng-click="maximize()">Maximize</button>
        </div>
</div>

1. z-index is ok
2. jquery will help angular
3. ...

Update 1 Plunker

Any ideas will be appreciate!

Answer 1

Change the css of the div on click, add properties:

top: 0;
left: 0;
height: 100%;
width: 100%;
position: fixed;
z-index: 999;

Example : JSfiddle