Currently I am using Ag Grid v27.3.0, and contents inside filter list in Set Filter not being displayed correctly as shown in the below image. Data is not getting wrapped correctly.
Below is what i have tried, but of no use.
Am i missing anything here?
:host ::ng-deep .ag-set-filter-item
{
height: max-content;
}
It cannot be dynamic but you can set the height with the following config.
{ field: 'athlete', filter: true, filterParams: {
cellHeight: 35
} },
https://plnkr.co/edit/OOIbFw17EMxJWY72?open=app%2Fapp.component.ts
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 13 days ago.
Improve this question
This question is too nuanced for me to find an answer on Google and I've been struggling with it for so long trying to find a good answer.
I want span elements to cut off with an ellipsis when they overflow a div. The problem is that this behavior only works when I set the span's display to block, but this causes the other spans who aren't long enough to overflow the div have their widths expanded, when I want them to stay only the size of their inner content.
Here's a demonstration in an online editor - try changing display from "block" to "inline" to see what I mean.
http://tpcg.io/_0UNNZM
Any help would be appreciated, I am new at css and it has been treacherous to learn so far. :)
My solution is a bit hacky. I gave the second span a classname.
<span class="secondElement">000</span>
I then set the second element to display: inline:
.secondElement {
display: inline;
}
It solved the issue. Here is the working solution: http://tpcg.io/_PJLSI5 .
Edit:
Since the elements are dynamic. I implemented the change the functionality with the help of JavaScript.
First, I add a class name spansContainer so that I can reference it with JavaScript. And I also removed the class on the second span element:
<div class="spansContainer">
<span>0000000000000000000000</span>
<br />
<span>000</span>
</div>
In the CSS, I set display to inline and added a new class block, that sets display to block:
span {
background-color: #0000ff80;
overflow: hidden;
text-overflow: ellipsis;
display: inline; /* set it to inline*/
}
/* this class is added to the span element using JavaScript */
.block {
display: block;
}
From there, I wrote the JavaScript solution:
const spansContainer = document.querySelector(".spansContainer");
const spanElements = document.querySelectorAll("span");
// add the class `block` to all span elements
// that have a width greater than the parent
// on page load.
spanElements.forEach((spanEl) => {
if (spanEl.offsetWidth > spansContainer.offsetWidth) {
spanEl.classList.add("block");
}
});
// configuration of the observer:
config = {
attributes: true,
childList: true,
characterData: true,
subtree: true,
};
// create an observer instance
var observer = new MutationObserver(function (mutations) {
// loop through the mutated span elements
mutations.forEach(function (mutation) {
const spanEl = mutation.target.parentElement;
if (spanEl.offsetWidth > spansContainer.offsetWidth) {
spanEl.classList.add("block");
} else {
// remove class 'block' if span's width is
// smaller than the div
spanEl.classList.remove("block");
}
});
});
// pass in the target node, as well as the observer options
observer.observe(spansContainer, config)
I created the codepen for the solution here: https://codepen.io/Stanleyu/pen/bGjJwxO
By default Ag-grid sets a fixed column menu width. Their documentation has an example of setting the column menu width to a different fixed value. The issue with this approach is that every column will have the same menu width.
Is there a way to dynamically set the column menu width based upon the column's filter list values? The following has no effect:
.ag-set-filter-list {
width: auto;
}
Similarly word wrapping could also solve this issue, but is also not working:
.ag-set-filter-list {
overflow-wrap: break-word;
}
I also tried using the postPopup callback to adjust styling after rendering, with no luck:
created() {
this.postProcessPopup = (params) => {
if (params.type !== 'columnMenu') {
return;
}
params.ePopup.style.overflowWrap = "break-word";
params.ePopup.style.width = "auto";
}
}
Digging into Ag-grid's filter list styling more, I realized that the filter items are absolutely positioned and use top values for placement. This made it difficult to wrap filter values without having them collide with each other.
I contacted Ag-grid support and they confirmed that dynamic filter list widths are not supported. They did mention their tooltips feature though, which works for my use case.
I modified that example in two ways:
Only show tooltips for filter list values that are longer and will be cut off by the edge of the filter menu.
Only show tooltips for values in the filter list, not for rows in the grid.
Here's my version of a custom tooltip with the above modifications:
export class GridColumnFilterTooltip {
init(params) {
const FILTER_VALUE_CHARACTER_LIMIT = 28;
this.tooltip = document.createElement("div");
if (
params.location === "setFilterValue" &&
params.value.length > FILTER_VALUE_CHARACTER_LIMIT
) {
this.tooltip.classList.add("grid-column-filter-tooltip");
this.tooltip.innerHTML = params.value;
}
}
getGui() {
return this.tooltip;
}
}
I have a a web page where various fields are shown or hidden by toggling between "display:block" and "display:none". However, I added some extra stuff to the page and discovered that I needed to special-case several tags: TD needs to use "display:table-cell:, TR needs to use "display:table-row", and so on...
Is there any general off-the-shelf solution to this (i.e. look up the "natural" display type based on the tag name) or am I stuck with creating a JS object by hand which lists tag names and the corresponding display types?
You can apply revert to display property to set the element to it's original value and get the original value by Javascript.
const getOriginalDisplayProperty = (elem) => {
const modifiedDisplayProperty = getDisplayProperty(elem); //store modified display property
elem.style.display = "revert"; //revert to original display property
setTimeout(() => {
elem.style.display = modifiedDisplayProperty; // Again set original display property
}, 0);
return getDisplayProperty(elem);
};
const getDisplayProperty = (elem) =>
window.getComputedStyle(elem, null).display;
getOriginalDisplayProperty(document.querySelector(".test"));
getOriginalDisplayProperty(document.querySelector(".test-span"));
div {
display: inline;
}
span {
display: flex;
}
<div class="test"></div>
<span class="test-span"></span>
I'm trying to wrap contents of a row of ag-grid into multiple lines but I can't get the contents to display over multiple lines. The data for rows is provided dynamically at the time of certain condition check.
I have tried using the white-space:normal property but it didn't do anything.
I also tried wrap-text but it is not a valid property.
Here's my code for reference.
component.ts
columnDefs = [
{headerName: 'S.No.', field : 'SNo'},
{headerName: 'Error Description', field: 'Error_Description', autoHeight: true},
]
rowData = []
provide data to rows
for(let i = 0; i<this.validationErrors.length;i++){
let errorObj={};
errorObj["SNo"]=i+1;
errorObj["Error_Description"]=this.validationErrors[i];
this.rowData=[...this.rowData, errorObj]
}
And here is a snapshot of the display
index.html
As you can see in the image, the AZAAAAAA.... part is overflowing. The following is the css that is applied to the cell implicitly.
style.css
.ag-cell {
display: inline-block;
overflow: hidden;
position: absolute;
text-overflow: initial;
white-space: inherit;
}
If I try to alter the text-overflow property to initial or if I try to change the white-space to normal, it clips the entire AZAAA... part.
How do I resolve this?
Note: I'm not using any of the APIs to handle rows or columns. I have just defined 2 arrays and bound them to the html as follows:
<ag-grid-angular [hidden]="isValid" class="ag-theme-balham" [rowData]="rowData" [columnDefs]="columnDefs">
<!-- Show table -->
</ag-grid-angular>
I have following HTML code:
https://gist.github.com/enlilcz/4c8baf50f35838ed5bb2
And phantomJs inserts this whitespace:
Almost no styles is on page, and I believe this problem is not about styles.
Problem is in nested tables - there is table in table.
When is removed parent table - removed lines 23-26 and 230-233 in HTML
and whitespace just dissapear.
PhantomJs settings is:
{
outputFormat: "pdf",
html: "myHTML",
version: 2,
phantomParams: {
paperSize: {
format: "A4",
margin: "0px"
}
}
}
And when I substitute paperSize to
viewportSize: {
'width': 2750, // or any other dimensions
'height': 3850
}
it also starts to work, but I need to use paperSize...
Does anyone knows where is the problem?