I'm getting a weird white border line for header check box selection in ag-grid react. Could you please help me get rid of this?
Below is my column definition:
columnDefs: [
{
minWidth: 45,
maxWidth: 45,
headerCheckboxSelection: true,
checkboxSelection: true,
lockPosition: true,
pinned: 'left',
cellStyle: { border: 'none' }
},
ag-grid-react version: 25.1.0
Thanks in advance!
Related
I'm trying to change the bg color of ag-grid in React application. I have tried row cell style but I want to change the full bg of my grid.
my code is:
{
headerName: "Module Name",
field: "ModuleName",
sortable: true,
filter: true,
resizable: true,
cellStyle: function(params) {
return { backgroundColor: "#red" };
}
},
You could use the following CSS to change the background:
.ag-root, .ag-header, .ag-cell {
background-color: #f5f5ff !important;
}
https://embed.plnkr.co/P3HrdAQUOA8rkmIO/
Another option would be to customize the theme: https://www.ag-grid.com/javascript-grid-themes-provided/#customizing-sass-variables. This would a more complex solution, but would be better if you want to override a bunch of styles.
I am in trouble with my CSS and I don't find the problem!
Inside the last cell of my datatables I've a dropdown menu that appear clicking on it.
The problem is that the menu "stay" inside the cell and show me scroller!
My fiddle: http://jsfiddle.net/oxs8fp4e/1/
This is my code for table init, but the problem I think is inside CSS of the theme, not table init:
myTable = $('#tabellaArticoli').DataTable({
responsive: {
details: {
type: 'column',
target: 0
}
},
paging: true,
"pageLength": 100,
"lengthMenu": [ [20, 50, 100, -1], [20, 50, 100, "Tutti"] ],
"info": false,
scrollCollapse: false,
scrollX: false,
scrollY: false,
"columnDefs": [
{
orderable: false,
className: 'control',
searchable: false,
targets: 0
},
{ "orderable": false, "targets": 1 },
{ "width": "5%", "orderable": false, "targets": 'azioni' }
]
});
Instead i'd like to show the dropdown like this example: https://keenthemes.com/metronic/preview/demo7/crud/datatables/basic/basic.html
Can someone help me with my css?
EDIT: I've already set scrollX as false: this is not the problem. I think the problem is only inside the CSS
It's nearly the same problem as linked in the 'possible duplicate'-comment. Your table and one or more wrapping elements got the overlow: hidden; style assigned.
In your case you could do the following to achieve that the whole popup-menu becomes visible.
remove/override the overflow-styles:
.table-responsive,
.dataTables_scrollBody {
overflow: visible !important;
}
Change the transform of the dropdown-menu-elements defined by the inline-styles:
transform: translate3d(-120px, 20px, 0px);
I have a layout that I need to put side by side.
Th code is in Extjs but I'm trying to style this container when a values gets selected in the combo box. As in the gif:
https://i.stack.imgur.com/dlgKC.gif
The container is moving upwards when any selection is been made. Is there any way in CSS I can control this behavior on select and make sure it stays still and does not move on selection?
addFilter: function(token, filter, op) {
var filterItem = Ext.create({
xtype: 'container',
height: 30,
cls: 'item',
layout: {
type: 'hbox',
align: 'middle'
},
items: [
this.typeCombo = new Ext.form.ComboBox({
emptyText: $L('Select a filter...'),
store: this.menuStore = new Ext.data.ArrayStore({
fields: ['key', 'title'],
data: this.getFilterValues()
})
})
}]
}); // end of filteritem
}
},
CSS:
.item div.qx-multi-select-combo-wrap{
position: absolute;
left: 320px;
}
Any idea ? Thanks!
I have the following sidebar in my extension but I want change the look and feel. How can I do this?
var sidebar = new appAPI.sidebar({
position: 'right',
url: 'http://news.yahoo.com',
html: 'Some Html',
title: {
content: 'Yahoo News',
close: true
},
opacity: 1.0,
width: '300px',
height: '100%',
preloader: true,
sticky: true,
slide: 150,
openAction: ['click', 'dblclick'],
closeAction: 'click',
theme: 'default',
scrollbars: false,
openOnInstall: true
There are several ways to do achieve this but my preferred method is to inject the relevant CSS rules into the page using the appropriate selector. So, for example, to change the border color to red:
var inlineCss = '.crossrider-sidebar-'+appAPI.appInfo.id+'-container {' +
'border-color:red !important;' +
'}';
appAPI.dom.addInlineCSS({css:inlineCss});
[Disclosure: I am a Crossrider employee]
I am trying to integrate ExtJS 2.0 with Java rich faces. I am trying to obtain a basic layout using Ext.Panel.
So I have written a code like:
Ext.onReady(function()
{
Ext.QuickTips.init();
var myBorderPanel = new Ext.Panel(
{
renderTo: document.body,
width: 700,
height: 500,
title: 'Border Layout',
layout: 'border',
items:
[
{
autoLoad:{url: 'panel.html', scripts:true},
renderTo: document.body.footer, // a div by name footer
title: 'South Region is resizable',
region: 'south', // position for region
height: 100,
split: true, // enable resizing
minSize: 75, // defaults to 50
maxSize: 150,
margins: '0 5 5 5'
}]
});
});'
The above code works fine. But in the above code if i use panel.xhtml instead of panel.html, it does not work.
If this is a repost I am sorry.
I got it working but without using autoLoad. I used contentEl and that works as a perfect alternative.