Comments (4)
I still think this is a bug, it should use CSS vars to calculate the line-height correctly.
Just to comment on this, the current behaviour is by design - the intention is that text in default height rows has the right amount of padding to make it appear vertically centred, but that if the row height becomes higher the text content is top aligned. Some applications rely on this behaviour to keep mixed-height content aligned. I agree it would be useful to have a feature to change the vertical alignment, I'm just explaining why this has to go through the feature request process rather than the bug fix process.
from ag-grid.
You can vertically align text in cells using CSS:
.ag-cell-value {
display: flex;
align-items: center;
}
Here's a code sample (CSS has been added at the bottom of index.html): https://plnkr.co/edit/kQbNq6riZfKUazy3?open=app.component.ts&preview
from ag-grid.
That breaks text-overflow: ellipsis it's not acceptable since display: flex cannot be used with text-overflow ellipsis without the ellipsis content be wrapped into a container with for example display: block.
I guess this is also the reason ag grid uses line-height with calculations to center the content so that it still supports ellipsis.
So basically the default requested behaviour from the business/ multiple teams is to use ellipsis.
I still think this is a bug, it should use CSS vars to calculate the line-height correctly.
For all sizes line-height is uses to center the content and there is a good reason for it - ellipsis.
For getRowHeight its forced breaking the line-height calculation resulting in the content displayed on top.
There is a solution with a custom renderer that makes it complicated with multiple renderers or a special case where we for example activate autoHeight on the cell and ag grid will automatically add a wrapper in the cell (this is the workaround we are using now but that is a workaroud! ).
from ag-grid.
Hello @pfteter,
Thank you for the suggestion.
Currently there's no way to implement this behaviour with AG Grid. Whilst we do not agree that this is a bug, we agree this would be a valuable addition to the product and we have added a feature request for this.
We have added this requirement to our backlog and we are tracking it with the following reference: AG-11667
We have no timeline for this at the moment, but this can still be picked up by our team when they're making modifications to this functional area of AG Grid. Please use the functionality currently provided by AG Grid until this is delivered at a later point.
See whether this item will be in the next release by checking the NEXT RELEASE checkbox on the product pipeline page:
https://www.ag-grid.com/ag-grid-pipeline/
The best way to track this is to sign up for AG Grid new release notifications using the instructions here. This way you'll know as soon as a new version is out and you can check whether this specific item was implemented on the changelog page.
Thanks again for bringing this up with us.
Kind regards,
Zoheil
from ag-grid.
Related Issues (20)
- Incorrect Checkbox Icon Rendering for Boolean Values in Grouped Columns HOT 1
- <ag-grid-angular> switch between [treedata] HOT 1
- Update a cell that is currently being edited [32314] HOT 1
- A bug occurred when the Paid Enterprise filter was searched remotely HOT 4
- Issue with the theme builder generated css file HOT 1
- Can a ag-grid cell has 3 or 4 functions?I mean that the cell has 3 or more click events,you can use these envet to do what you want to do .
- Set Filter with excelMode HOT 1
- Multiple grids in the same Vue component fail to load data after upgrade to v31 HOT 1
- Ag-Grid tree data formatting data
- Ag Grid SSRM Row Group performance HOT 1
- Ag-Grid, how to hide the group column
- [X] BUG REPORT: 'TypeError' When Editing a Date Field using cellEditorSellector HOT 1
- how to remove cell renderer in pinned row data
- I am Getting the same error from cypress automation but in UI it works fin I am using version 31.1.0(Give me Solution for this version) ", Uncaught TypeError: Cannot set properties of null (setting 'textContent') at ag-grid-community.auto.esm.js:55887:40 HOT 1
- header moving with scroll on using domlayout="autoHeight" HOT 1
- aggrid-vue3 31.3.2 Context will be watch deep ? true Can there be a different implementation method? Due to the Vue mechanism, variables that have been deep will be updated regardless of whether there is a value change, resulting in performance consumption HOT 2
- onRowSelected event : (event?: Event | null) is always null while clicking checkbox for selecting row when setting rowModelType "serverSide" HOT 1
- Pagination issue when sorting applied on empty grid HOT 1
- Function("return true") coming from AG-8451 throws CSP violation (script-src) 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 ag-grid.