Comments (5)
It's a good feature, simple to add and aligned with the project philosophy. Said that, in this grid solution there is no 'grid type', there are just cols
and rowHeight
. Cols fit by default, because is a relative value, but not rowHeight
.
We should maybe allow the user to put another value in rowHeight
that are not CSS pixels, for example rowHeight = 'fit'
. This would work and would make the grid layout fit in it's space. There is also the possibility to make rowHeight
optional and if not provided just fit, but I am more with the first one.
What are your thoughts? @irustm
from angular-grid-layout.
rowHeight = 'fit'
Looks good)
from angular-grid-layout.
@llorenspujol I was taking a look into this library and rowHeight = 'fit' is a requirement since our layout uses css grid. It would be really helpful and a great feature if you implemented this since other libraries don't have this. Just curious what exactly it would take to implement this feature?
from angular-grid-layout.
@andrewpolemeni The feature itself doesn't require much changes in the code, since it just changes how the rowHeight is calculated. Said that, I tested it a little bit, and I find it a little confusing compared to the current grid purpose.
I would like to know your exact use case, do you expect rowHeight = 'fit'
to work equal like gridster2 Grid Types= fit
? You can test it here: https://tiberiuzuld.github.io/angular-gridster2/gridTypes
Right now with the small test I did, it does so, works like in gridster2. But as I said, I found it a bit of an edge case. The fact that a grid item rezise or move can make all other grid items to change its size is a strange behavior IMO. So, would be nice to know your use case more detailed, and see if rowHeight = 'fit'
can be finally included and how.
from angular-grid-layout.
@llorenspujol It's basically the default behavior of css grid. When it builds the grid, it takes the item where the row = 1.. whatever item is at 1 row height and is the largest item in the grid, that's the default height of every row so if we have an item with row = 2, it would be double that largest item that is set to 1.
Requirements:
- No defined heights since we want ccs grid to determine that for us.
- Also being able to constrain it to a certain column count (that way the grid height doesn't change). Would be great to make this optional to set the column count or else it goes to default behavior.
from angular-grid-layout.
Related Issues (20)
- Add v0 branch HOT 1
- Angular 16 support to use standalone component and signals HOT 6
- Have you supported feature related in drag and drop to add new item in grid and nested grid?
- How to auto adjust the grid height based on content
- Dragging and Resizing not working on windows touch screen
- Can I give specific colour to the cell from database?
- Feature to download whole layout as a pdf
- Grid items not resizing if container is resized
- Lack of Auto-Reversion to Default Position in 'Compact type none' Mode HOT 1
- Feature Request - New Directive for Dragging Items into Grid HOT 2
- Documentation for backgroundConfig HOT 1
- Emit layoutUpdated event when adding or removing items from grid HOT 1
- Turn off drag and resize feature HOT 1
- Add all other resize options (now is only available 'se-resize'). HOT 3
- How can I lock down a ktd-grid-item? Preventing any movement or replacement! HOT 6
- Support for Angular 16? HOT 1
- RTL direction HOT 2
- Setting Max-height for grid HOT 1
- Drag doesn't work properly when the drag handle is in a child component HOT 1
- Responsive number of columns HOT 1
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-grid-layout.