garuav
commented
4 years ago Hi @dhavalsolankislk I implemented the same by the following code, I think this will help you.
NOTE: Might be you will face issue related to z-index, I solved that by emitting value and setting Z-index dynamically on other component.
HTML Code --- start <gridster [options]="options"> <gridster-item [item]="item" *ngFor="let item of dashboard; let i = index"> <div class = "gridster-style" #gridsterItemElementRef > <a (click)=" fullscreenGridsterItem(gridsterItemElementRef, item)" > Full Screen
Component Code --start @ViewChild('gridsterItemElementRef', { static: false }) gridsterItemElementRef: ElementRef;
//variable to store top Position topPositionValue;
fullscreenGridsterItem(event, item) {
const gridster_item = event.offsetParent;
if (gridster_item.classList.contains('maximize-gridster-item')) {
document.body.style.overflow = '';
gridster_item.classList.remove('maximize-gridster-item');
setTimeout(() => {
gridster_item.style.position = 'absolute';
gridster_item.style.top = '';
});
} else {
this.topPositionValue = window.pageYOffset || document.documentElement.scrollTop;
gridster_item.classList.add('maximize-gridster-item');
gridster_item.style.position = 'fixed';
gridster_item.style.top = ${this.topPositionValue - 32}px; //here in my case 32 px is header height
this.cdr.detectChanges();
document.body.style.overflow = 'hidden';
}
}
Component Code --end
CSS Code -- start .maximize-gridster-item { height: 100vh !important; width: 100vw !important; // top: -30px !important; left: 0 !important; z-index: 999; position: fixed; overflow: auto; bottom: 0; transform: none !important; .gridster-style { height: 100%; } } CSS Code-- end
dhavalsolankislk
Hello, We are using gridster in our project. We need a functionality to maximize gridster item to browser screen. How can we achieve this ?