Maximizing Bootstrap card size in Angular4: A step-by-step guide

How can I make Bootstrap cards resizable on top of other elements when clicked on an icon to make it full screen and overlay on other cards?

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;
}

Answer №1

Utilize Panels in place of cards. Give it a try.

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');
});
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Troubles with CSS Child Hover, Rotation, and Clipping in Pie Chart styling

The issue I am facing is with a 3-section pie chart where all sections look virtually identical. However, the :hover effect does not trigger on the first section, but it works on the other two. Each element has an equal number of overlapping parent divs, ...

Child div height (with embedded iframe) - issue with responsiveness

I have been working on a simple code for a day now, trying to solve a problem with no progress :( My goal is to display an iframe with a background image. However, the snippet code I have is not showing the background image as intended. You can view the li ...

Tips for designing a pre-selection process

I've been considering the idea of implementing a temporary screen that allows users to choose between different options before proceeding to a specific page. For instance, on the contact page, users would be prompted with a question like "Are you loo ...

Tips to avoid multiple HTTP requests being sent simultaneously

I have a collection of objects that requires triggering asynchronous requests for each object. However, I want to limit the number of simultaneous requests running at once. Additionally, it would be beneficial to have a single point of synchronization afte ...

Angular version 16+ is incompatible with Three.js and does not function properly together

I am attempting to integrate three.js into my Angular 16 project and encountering the following error message: npm i @angular-three/core npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: [email&# ...

"Encountering issues with ngrx store selector when importing app from a custom

My Angular library includes a store implementation and is distributed as an NPM package, used in various Angular applications. I encountered an error when attempting to use a ngrx store selector exported from the library in a different Angular project: ...

The mystery of Angular 2: Unveiling why ActivatedRoute.params always returns an empty object

I've been facing an issue with accessing the :id route parameter in a router guard. It seems to always return an empty Object{}. Initially, I was unsure of how to approach this problem, so I referred to this question for guidance. However, it didn&ap ...

Similar to AngularJS Component's "require" property, Angular Component also has an equivalent

In the process of updating a sizable Angular 1.6 App, we encounter numerous components that utilize 'require' to access the parent component's controller. The structure of an AngularJS component appears as follows: var tileTextbox = { ...

Deactivate the button permanently upon a single click

In the project I'm working on, there is a verification page for e-mail addresses. When new users register, they are sent an e-mail with a link to verify their e-mail. If the link is not clicked within a certain time frame, a button appears on the page ...

The flex reverse-column child's text selection occurred in the incorrect direction

I am having an issue with selecting text in a flex container that is set to reverse column. The selection I make is incorrect because the browser tries to select from the end of the element, resulting in improper selection. For example, <div style=" ...

What is the best way to display an element once an input field with type "date" is populated with a value

Struggling to create a dynamic form that reveals additional fields when a date picker is used? I've searched for solutions, but everything I find involves complex validations and logic that exceed my needs. I've had some success with revealing e ...

Quickly send off an Angular 4 HTTP POST request and move on

I've been experimenting with making a fire and forget request, but none of my attempts seem to be working as expected. The situation is that after completing one subscribable request, I need to redirect to another page. However, before the redirectio ...

Unable to select multiple checkboxes as they are unresponsive and not registering any clicks

I am facing an issue with rendering multiple checkboxes in a grid cell. I attempted to use formly multicheckbox, but unfortunately the checkboxes did not render properly. So I decided to try a different approach, however, now the checkboxes are not being c ...

Achieve seamless transitions between animations when hovering with CSS3

I am facing an issue with an element that has a CSS3 animation. When the element is hovered over, the animation changes to another infinite one. While everything is functioning correctly, the transition between animations sometimes feels too abrupt and b ...

Ways to align anchor tags in the middle of a DIV element?

<div style="border: 1px solid rgb(0, 0, 0); height: 30px; width: 30px; background-color: rgb(245, 225, 130);"> <div style="margin: 5px;"> <a href="#link">#down2#</a> </div> </div> This is the current code I am w ...

The reason the CSS direct descendant selector does not affect Angular components

We are working with a basic main.html. <app> <sidebar></sidebar> <main-content> <router-outlet></router-outlet> </main-content> </app> After loading a component through routing (changing the ...

What is the best way to pass a full object from an Angular 2 dropdown list to the service?

Is it possible to return an object from a dropdown list to the service? I would like to be able to get the component object whenever I click on an item in onChangeForComponent. <select [ngModel]="selectedDev" (ngModelChange)="onChangeForComponent($eve ...

Troubleshooting problems with Bootstrap cards on mobile devices

I've encountered an issue on small devices with the Bootstrap card. I'm using a hover effect to slide up the content, but on small devices, the content is cutting off the image. I'm not sure how to position the content directly after the ima ...

A method to access a stored value in localStorage that does not involve utilizing the __zone_symbol__value property

I am encountering a problem with localStorage. After storing user information in localStorage, I am unable to retrieve it without using the __zone_symbol__value property of the parsed value. This is how I store data into locaStorage localStorage.setItem(& ...

Tips for utilizing the @Component decorator in both abstract classes and their implementations within Angular 8

While working with Angular 8, I am attempting to utilize abstract components. My goal is to define the templateUrl and styleUrls in my abstract class, but have the selector name specified in the implemented class. Here is an example: @Component({ // sel ...