I am using ag-grid 22.2.1 with angular12. And trying enableRtl feature.
I am not able to make it work. CSS (even JS) seems to be broken.
<ag-grid-angular
[columnDefs]="columnDefs"
style="height: 100%;"
class="ag-theme-blue"
[rowData]="data"
[enableRtl]="true"
[modules]="modules"
>
</ag-grid-angular>
It looks like this was a bug in v22, I looked back to find the version that it was fixed in, looks like from v25 onwards it was fixed based on the changelog
You can verify this here (v25)
<ag-grid-angular
#agGrid
style="width: 100%; height: 100%;"
id="myGrid"
class="ag-theme-alpine"
[columnDefs]="columnDefs"
[defaultColDef]="defaultColDef"
[enableRangeSelection]="true"
[rowData]="rowData"
[enableRtl]="true"
(gridReady)="onGridReady($event)"
></ag-grid-angular>
I'd recommend upgrading to the latest version (v27), but if that's not possible then v25.3.0 should also work for you.
Related
I have been using ag-grid-enterprise and have noticed that the feature of dragging and dropping columns from the toolbar into the ag-grid. This feature was there up to version 21.
Is there a way I can enable this feature or this has been removed forever intentionally?
Working version: https://www.ag-grid.com/archive/21.0.0/javascript-grid-tool-panel-component/
Current version: https://www.ag-grid.com/angular-grid/tool-panel-columns/
Seems like they have removed it by default and we can enable it by adding the below flag to the grid definition:
allowDragFromColumnsToolPanel=true
<ag-grid-angular
#agGrid
style="width: 100%; height: 100%;"
id="myGrid"
class="ag-theme-alpine"
allowDragFromColumnsToolPanel=true
[columnDefs]="columnDefs"
[defaultColDef]="defaultColDef"
[sideBar]="sideBar"
[rowData]="rowData"
(gridReady)="onGridReady($event)"
></ag-grid-angular>
It seems that Admin LTE sets the min-height value for ` and also the side bar. For some reason, in my case, this value is getting calculated to be way higher than it should, which causes the side bar to be unnecessarily long. See the screenshot below.
How can this be fixed?
you need add this to this body tag
class="skin-blue fixed sidebar-mini sidebar-mini-expand-feature" style="height: auto; min-height: 100%;"
like this:
<body class="skin-blue fixed sidebar-mini sidebar-mini-expand-feature" style="height: auto; min-height: 100%;"></body>
this fix it, i have the same problem
this is a way to fix it. you can put these code to fix.js
function initFix(){
$('body').layout('fix');
}
$(function(){
setTimeout(initFix,0);
});
Locally ran Basic AngularJS 1.x Example, found out if style="height: 100%;" the grid collapsed into a horizontal line. Setting it to something else like 100px works.
Everything the same except my Angular is 1.5.0, and ag-grid v8.1.0.
<div ng-controller="exampleCtrl">
<div ag-grid="gridOptions" class="ag-fresh" style="height: 100%;"></div>
</div>
JS is the same as the tutorial. Looks like a bug.
This is almost certainly due to you having DOCTYPE html in your html file.
If you do, then you need to ensure that the grids container has a non-0 height to fill, otherwise it will appear as a flat line as you've found.
This is not an ag-Grid specific issue - it's a side effect of not having quirks mode in use.
The easiest thing for you to do is this:
<style>
html, body {
width: 100%;
height: 100%;
}
This StackOverflow Question/Answer explains the underlying issue pretty well
You shall try setting the autoHeight of the ag-grid, by setting the DomLayout.
See the sample code below for angular.
onGridReady(params) {
this.gridApi = params.api;
this.gridColumnApi = params.columnApi;
//The ag-grid is not enlarging based on the page height,
//so dynamically adjusting the height of the grid
this.gridApi.setDomLayout("autoHeight");
}
For reference see this https://plnkr.co/edit/Jb1TD7gbA4w7yclU?preview
.ag-root-wrapper-body.ag-layout-normal.ag-focus-managed {
height: 100%;
}
I need to select a value from a drop down using gatling / scala. code as below. formParam seems not working for this type .can some one help me to solve this issue.i need to select Mobile Phone from the Dropdown.
<div id="ext-gen275" class="x-combo-list-inner" style="width: 148px; margin-bottom: 8px; height: 63px;">
<div class="x-combo-list-item">--Select--</div>
<div class="x-combo-list-item">Mobile Phone</div>
<div class="x-combo-list-item x-combo-selected">Tablet</div>
</div>
Wordpress wraps images with captions in a div with a class of .wp-caption.
I'm looking for a way to select images that don't have this div so I can wrap them in different div. (to keep a consistent border around all the images)
<div class="blog-post-content">
<div id="attachment_220" class="wp-caption alignleft" style="width: 310px">
<img class="size-medium wp-image-220" src="/path/to/image" alt="" width="300" height="280" />
<p class="wp-caption-text">Caption Text</p>
</div>
<p>This is the body of the post</p>
</div>
To test my selector, I'm just trying to add a green border. I can handle the .wrap() once the selector is working.
The most promising of my attempts is:
$('.blog-post-content img').parent('div:not(".wp-caption")').css('border', '2px solid green');
... but no luck.
How about this: (untested)
$('.blog-post-content img').filter(function(){
return !$(this).parents('div').hasClass('wp-caption');
}).css('border', '2px solid green');
try:
$('.blog-post-content img').parent(':not("div.wp-caption")')
Not if what Matti says abotu the a element in the hierarchy then the above wont work.
I know this question was asked a long time ago, but I would like to suggest the following:
$('.blog-post-content img').closest('div:not(".wp-caption")')
Untested, but I think that should work, and is shorter than the answer above that works. Using closest means the a is ignored.