2

I have multiple cards on same page now i am trying to add functionality if user click on icon make that card full screen and it should overlay on other cards , How to make bootstrap cards re-sizable on top of other elements ?

detail.component.html

<div class="card card-outline-info" >
  <div class="card-header bg-info"><h5>Detail</h5><span class="pull-right p fa fa-compass" [ngClass]="{'expandWidget':isClassExpanded}" (click)="onClickMe($event)"style="font-size:25px"></span></div>
  <div class="card-block">
      <div class="table-responsive" style="cursor: pointer">
        <generic-table [gtClasses]="'table-hover'" #myCustomTable [gtSettings]="secondConfigObject.settings" [gtFields]="secondConfigObject.fields" [gtData]="secondConfigObject.data"></generic-table>
      </div>
    </div>
  </div>

app.component.ts

 onClickMe(ev) {
        ev.preventDefault();

       cons event = this;

        if (event.children('span').hasClass('fa fa-compass'))
        {
            event.children('span').removeClass('fa fa-compass');
            event.children('span').addClass('fa fa-exchange');
        }
        else if (event.children('span').hasClass('fa fa-exchange'))
        {
            event.children('span').removeClass('fa fa-exchange');
            event.children('span').addClass('fa fa-compass');
        }
          (event).closest('.card').toggleClass('expandWidget');
}

app.component.css

.expandWidget {
  display: block;
  z-index: 9999;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  overflow: auto;
}
hussain
  • 6,587
  • 18
  • 79
  • 152

1 Answers1

0

Use Panels instead of cards. Try this.

HTML

<div class="container">
    <div class="row">
    <div class="col-md-8">
        <h2>Fullscreen toggle</h2>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">Panel title</h3>
                <ul class="list-inline panel-actions">
                    <li><a href="#" id="panel-fullscreen" role="button"     title="Toggle fullscreen"><i class="glyphicon glyphicon-resize-full"></i></a>    </li>
                </ul>
            </div>
            <div class="panel-body">
                <h3>Panel body</h3>
                <p>Click the resize icon in the top right to make this fullscreen.</p>
            </div>
        </div>
    </div>
</div>
</div>

CSS

   .panel-actions {
    margin-top: -20px;
    margin-bottom: 0;
    text-align: right;
    }
   .panel-actions a {
     color:#333;
     }
   .panel-fullscreen {
   display: block;
   z-index: 9999;
   position: fixed;
   width: 100%;
   height: 100%;
   top: 0;
   right: 0;
   left: 0;
   bottom: 0;
   overflow: auto;
   }

JS

$(document).ready(function () {
//Toggle fullscreen
$("#panel-fullscreen").click(function (e) {
    e.preventDefault();

    var $this = $(this);

    if ($this.children('i').hasClass('glyphicon-resize-full'))
    {
        $this.children('i').removeClass('glyphicon-resize-full');
        $this.children('i').addClass('glyphicon-resize-small');
    }
    else if ($this.children('i').hasClass('glyphicon-resize-small'))
    {
        $this.children('i').removeClass('glyphicon-resize-small');
        $this.children('i').addClass('glyphicon-resize-full');
    }
    $(this).closest('.panel').toggleClass('panel-fullscreen');
});
});
DEV
  • 949
  • 1
  • 9
  • 29
  • is there a way to do this in angular2 + because i am using angular can not use Jquery – hussain Jan 23 '18 at 19:55
  • Its almost the same code. All you have to do is automate the click functionality. Let me tell you. When the user clicks on the panel-fullscreen change the class of it in the code behind that will automatically change the panel to full screen – DEV Jan 23 '18 at 19:58
  • Here is the basic code for you http://plnkr.co/edit/jOO8YdPiSJEaOcayEP1X?p=preview – DEV Jan 23 '18 at 20:00
  • thanks for the refrence but i dont think its that easy to implement in angularjs and i am using angular2 – hussain Jan 23 '18 at 20:02
  • Its almost the same for angular2+ – DEV Jan 23 '18 at 20:03
  • This gives you the full code of what you want to do https://stackoverflow.com/questions/23762578/applying-ng-class-based-on-value?noredirect=1&lq=1 – DEV Jan 23 '18 at 20:32
  • Its simple. Think you will get it. – DEV Jan 24 '18 at 17:25
  • i could not do it can please provide angular2 code, it snot same code its throwing error on `$this` – hussain Jan 24 '18 at 17:26
  • update your question with what you have tried so for – DEV Jan 24 '18 at 17:31