I am trying to change the default checkbox in AG Grid to custom SVG I have made. The documentation says that AG Grid overrides browser checkboxes to show an icon but that is not the case in my project. I see the default browser provided checkboxes.(Tested in chrome and safari)
I've tried multiple themes too and still no icons.
I am using the AG Grid Svelte wrapper from here:
https://ag-grid-svelte.michael.kim/guide/overview/
Related
We're in the process of using AG Grid in an application to display and edit data, but are having some trouble with the column filter lists.
The icons for the columns being filtered do not have checkmark icons. The outline around the checkmark boxes changes colors, but there are no icons. I was able to recreate the issue in this sandbox: https://codesandbox.io/s/objective-galois-xx6b3z. Any ideas on how to fix this?
Expected behavior:
Checkbox icons should be visible as shown in AG Grid examples: https://www.ag-grid.com/examples/filter-set-filter-list/sorting-set-filter-values/packages/vanilla/index.html
Notes:
I created a very basic grid (see https://codesandbox.io/s/objective-galois-xx6b3z) to ensure that this issue is not related to any of the customizations we have added to our project
I tried using custom icons (see this in AG Grid's documentation), which were also not visible: https://www.ag-grid.com/examples/filter-set-filter-list/sorting-set-filter-values/packages/vanilla/index.html
You are trying to use Alpine theme with different fonts.
For this you will need to define CSS variable that will point to a different font:
.ag-theme-alpine, .ag-theme-alpine-dark {
--ag-icon-font-family: agGridMaterial;
}
I have an issue that the responsive grid is applyed in my published mode:
The first DIV of my components is using this AEM Grid.
There's a way to turn off? Because I want to use the Bootstrap Grid and leave the AEM Grid to use only in layout mode.
I am trying to create a navigation application using Mapbox GL JS. But the text labels are too small along with the searchbox. Where in the Mapbox GL JS API can we set the tilesize and ppi to fix it?
The best way to adjust the size of the text labels is to create a custom map style using Mapbox Studio, rather than programmatically manipulating the size of the map labels using the GL JS API (unless for some reason you need the text label size to be responsive on the client side).
You can navigate to studio.mapbox.com, select the New style button, choose a template to customize, and then click the Customize button. This will open the map editor interface, where you can navigate to the Layers panel on the lefthand side of the interface and select a layer whose properties you would like to edit.
For example, in the screenshots below I selected the state-label layer and changed the Text size property from 18px to 30px. More details about styling layer properties can be found in the documentation here.
To persist these changes to the map, you can publish your style, as described in the detailed documentation here. The way in which you can then add the custom map style to your application is dependent on the application you are developing for. The linked documentation specifies the appropriate steps for web, Android, iOS, Unity, and several other third party options.
The mat select editor if not working in the ag grid material sample project:
https://www.ag-grid.com/example-angular-material-design/
When changing the vegetable in the editor the selected item is not getting propagated back to the grid.
I have downloaded the sample project and get the same results.
There is an issue logged for Angular Material component with Editors.
Refer: ag-grid-pipeline
AG-2359 Investigating issues with popup editors not working anymore (ie Angular Material editors)
Its status shown as DONE, so in the next release 19.1.5 or 20.0.0, it should be fixed.
Currently out of the box my grid looks like this
https://www.ag-grid.com/javascript-grid-row-styles/#row-style
however I need the cells to be divided like they are on the grids on this page
https://www.ag-grid.com/javascript-grid-cell-styling/
anyone know how to set this value?
It is due to this theme ag-fresh (check that in the html markup, this theme class is applied).
When class="ag-theme-balham" is applied, you won't be able to see cell dividers.
You can also check the same on this ag-grid Demo page (change theme dropdown)