Comments (7)
Hi @tiberiuzuld,
Thanks for your response, your reactivity to answer and for your grid module ^^
I found how to maximize my widget (in the parent container), so I give my solution in case others are interested.
The solution is CSS only.
I the grid item, I set a specific class to the item I want to maximize , like :
<gridster-item [item]="item" *ngFor="let item of items" [ngClass]="item.isMaximized ? 'widget-maximize': ''">
And my css is :
.widget-maximize {
left: 0px !important;
top: 0px !important;
width: 100% !important;
height: 100% !important;
z-index: 500;
}
from angular-gridster2.
The Css solution is awesome.
I have tried the hole day until i found this simple solution.
Should be in the documentaion or example since this is a very common task
from angular-gridster2.
Hi @pgsrw ,
Yes it is possible by using this.options.optionsChanged()
from the options object you gave to the grid after you made the change to any option from grid and item.
resizeItem($event, item) {
item.y = 10;
this.options.optionsChanged();
}
<button md-icon-button md-raised-button class="resize-handler" (click)="resizeItem($event, item)">
<md-icon>open_with</md-icon>
</button>
Made a fix in v2.9.1 for the item options not being updated.
Let me know if this fixes your issue.
from angular-gridster2.
Hi,
yes it works!! great!
thx
from angular-gridster2.
Hi tiberiuzuld,
I want to maximize an item too (and then I want to unmaximize it with originals values).
I want to simulate this css :
maximise {
left: 0px ;
top: 0px ;
width: 100%;
height: 100%;
z-index: 500;
}
So, I try to do :
maximiseItem($event, item) {
item.x = 0; // OK
item.y = 0; // OK
item.cols = '100%'; // how?
item.rows = '100%'; // how?
// item.zindex = 500 //how ?
this.changedOptions(); // OK
}
How can I do ? is it possible ?
Thanks
from angular-gridster2.
Hi @walakad ,
There is no way to set cols and rows in %
.
Item zIndex
you can override from css.
But I think you mean you want to make your widget fullscreen.
This is not possible from library.
I suggest making a separate state for widget full screen where you just display your widget component without the gridster dashboard.
Thanks
from angular-gridster2.
Hello,
Does anyone provide demo full example of maximizing grid item?
from angular-gridster2.
Related Issues (20)
- cannot swap and push items smoothly in vertical scroll
- Scrolling the grid with "verticalFixed" mode and emptyCellDrag enabled
- Hi, In the context of using angular-gridster2, is there a method to assign a label or button to vacant grid cells, allowing the addition of a new grid cell?
- angular v17 has been released HOT 5
- The row width is too large
- [BUG] - Grid is bouncing/jumping in specifc browser size
- Auto Position Items When Browser Window Is Resized
- How to have scroll in the gridster while keeping the grid size
- Responsive and size of items
- is there a way to change grid matrix? HOT 1
- The vertical scroll does not work in mobile with fixedVertical
- Change style when moving grid items HOT 1
- Styling grid-item HOT 1
- getNextPossiblePosition() method issue
- What configuration setting allows to maximize item in available nearby space
- Empty Cell drop effect - RTL issue
- gridster-item initial position and display values are messing up Gantt Components
- How do I insert a container on top of the gridster-item?
- Gridster not allowing to add item when defaultItemCols and defaultItemRows is more then 1. HOT 1
- Support Angular 18 HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from angular-gridster2.