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?
Related
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
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 this issue with my pre tag that I have been trying to resolve for a while now. I have tried almost 20 suggestions that I have found and none of them seem to work.
I have a server running with node.js that has 2 websites on it, technically it's one website with 2 layouts. If I try using pre-tag on my 1st layout, everything seems to be displaying normally, however on my 2nd page I guess extra tabs that I can't seem to locate.
Here is what I have:
<pre><pre><code >
<script>
new Chart(document.getElementById("bar-chart"), {
type: 'bar',
data: {
labels: ["Blue", "Black", "Green", "Silver", "Red"],
datasets: [
{
label: "Votes for this color: ",
backgroundColor: ["#3e95cd", "#000000", "#35d90e", "#c0c0c0", "#c45850"],
data: [120, 384, 81, 223, 192]
}
]
},
options: {
legend: { display: false },
title: {
display: true,
text: 'Best Car Colors according to a 1000 votes survey'
}
}
});
</script>
</code></pre></pre>
and it is displaying like this:
Visuals
anyone have any idea what and why? I have tried unsetting all css and re-setting pre tag, but it does exactly the same thing.
Updated:
For all those who were and are still struggling with same issue, I found the problem! So I am using handlebars, and one the features is called "partials"
and I had a page that called on those partials, in this manner:
{{>crashcorse/intro_lessons}}
however it had some extra spaced before the {{> }} tag, due to auto formatting, removing these extra spaced seem to solved the issue.
I have used ag-grid ng in angular application. when number of columns exceeds not getting the horizontal scroll bar.
Are you sure is because of the number of columns? I had the same problem and the solution was take off the pinned option of every column.
For example if you have this:
{headerName: "Athlete", field: "athlete", width: 150, pinned: 'left'}
it has to be:
{headerName: "Athlete", field: "athlete", width: 150}
You can just say,
gridOptions.api.sizeColumnsToFit();
This will set the columns width and hence remove horizontal scrolling.
Sure you haven't got the suppressHorizontalScroll property on the gridOptions object set to true have you ?
var gridOptionsTop = {
columnDefs: columnDefs,
// don't show the horizontal scrollbar on the top grid
suppressHorizontalScroll: false,
enableSorting: true,
};
Try putting in minWidth across EACH columnDefs in ag-grid, this makes sure each has a width prop associated with it, so then if it overflows, a horizontal scroll-bar appears below
columnDefs = [
{minWidth : 100, field: 'a', headerName: 'test1'},
{minWidth: 120, field: 'b', headerName: 'test2'},
{minWidth: 80, field: 'c', headerName: 'test2'}
]
What you may find if you use:
gridOptions.api.sizeColumnsToFit();
Is that some pages take quite a time to shuffle out into the display.
What I found is that there is a flag on the api to show whether the width is dirty or not. Therefore I implemented a method of checking this:
refreshTable() {
if (this.gridColumnApi.columnController && this.gridColumnApi.columnController.bodyWidthDirty) {
this.gridApi.sizeColumnsToFit();
if (this.refreshAttempts) {
this.refreshAttempts--;
setTimeout(() => {
this.refreshTable();
}, 100);
}
} else {
this.refreshAttempts = 0;
}
}
I put this in a service class with an initialiser, the refresh attempts is passed into that too. I suggest going around twice, you may also want to play with the timeout delay as you may not wish such a large one.
The reason this seems to be happening is on some more complex grids is that one shuffle results in a bit of work but the width is still dirty. The next and maybe next one will help.
I have a simple Html element, that I am accessing from within a directive:
<div scroll-item ng-repeat="post in posts">
...
app.directive("scrollItem", function($window){
return {
link : function($scope, $element, $att) {
console.log($element[0].clientHeight);
console.dir($element[0]);
}
}
});
The two different logs produce different results. When I look through the object found in the second log, clientHeight returns 166; which is correct, In the first log however it returns 201. How can it possibly produce such inconsistent results?
I am not able to reproduce the issue in this simple fiddle: http://jsfiddle.net/9noo4uc5/1/
What could cause an issue like this?
Any element's client height return inner height of element so it is not necessary that every time it will return same value. Each element which has more text inside it which means more clientHeight.
The Element.clientHeight read-only property is zero for elements with no CSS or inline layout boxes, otherwise it's the inner height of an element in pixels, including padding but not the horizontal scrollbar height, border, or margin.
source:https://developer.mozilla.org/en-US/docs/Web/API/Element/clientHeight
myApp.directive("scrollItem", function(){
return {
link : function($scope, $element, $att) {
$element.on('click',function(){
console.log(this.clientHeight);
})
}
}
});
See this fiddle it is returning different innerHeight when you click on last element :
http://jsfiddle.net/9noo4uc5/6/