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);
Related
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!
I have a problem in aligning an item to the right, or anyway at the end of the column.
As you can see in the picture:
even if there is space on the right, it aligns the item left covering part of the text (The complete text is "Battery Level"). I would like to align it near the downward arrow.
I tried to use align:'right' without success.
How could I fix it? this is my code:
columns: {
defaults: {
flex: 1,
},
items: [{
....
},{
text: Strings.positionBatteryLevel,
hidden:true,
sortable: false,
defaults:{
margin:'-31 0 0 55'
},
items: [{
xtype: 'numberfield',
id: 'batteryFilter',
align:'right',
listeners: {
change (e,newValue, oldValue, eOpts ) {
filterGridAttributeType(newValue,'batteryLevel');
}
}
}],
},{
...
There is a config for columns to align the content:
columns: [{
text: 'Battery Level',
sortable: false,
==> align: 'end'
},{
...
In my FullCalendar rendering I use the dayGrid view to create a schedule. When populating this calendar view (schedule) with events, every event is the same height, regardless of the duration of the event. I would like to make the events bigger or smaller based on their duration, similar to what the FullCalendar demo shows for other calendar views. Is this possible to achieve using the dayGrid View?
My Calendar:
FullCalendar Desired Styling:
In v5 find in the CSS file .fc-h-event and add the height option. This is mine:
.fc-h-event { /* allowed to be top-level */
display: block;
height: 70px !important;
border: 2px solid #3788d8;
border: 2px solid var(--fc-event-border-color, #3788d8);
background-color: #3788d8;
background-color: var(--fc-event-bg-color, #3788d8)
}
I ended up finding a way to accomplish my goal. The CSS styling for the calendar rendering can be modified right in the html page using:
<style>
.fc-day-grid-event > .fc-content {
white-space: normal;
}
</style>
This allows the text of the event title to wrap onto multiple lines. Without modifying this styling the event text (title) just cuts off anything longer than the width of the event box.
Once this styling is in place, I can just insert newline characters ('\n') into my html in order to expand the size of the box. Because I am controlling my events from a database, it is easy to simply add newline characters into the title string corresponding to the desired size of the event.
Here is what my calendar looked like before:
And here are some sample events to recreate the image:
events: [
{
id: 'event1',
title: 'Event 1- 5h',
start: '2020-06-16',
displayEventTime: false,
editable: true,
allDay: true
},
{
id: 'event2',
title: 'Event 2- 2h',
start: '2020-06-16',
displayEventTime: false,
editable: true,
allDay: true
},
{
id: 'event3',
title: 'Event 3- 1h',
start: '2020-06-16',
displayEventTime: false,
editable: true,
allDay: true
}
]
Here is what the calendar looks like using my solution:
And the simple modification to the events needed for this solution:
events: [
{
id: 'event1',
title: 'Event 1- 5h' + '\n\n\n\n\n',
start: '2020-06-16',
displayEventTime: false,
editable: true,
allDay: true
},
{
id: 'event2',
title: 'Event 2- 2h' + '\n\n',
start: '2020-06-16',
displayEventTime: false,
editable: true,
allDay: true
},
{
id: 'event3',
title: 'Event 3- 1h',
start: '2020-06-16',
displayEventTime: false,
editable: true,
allDay: true
}
]
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.
The property width is a pixel width.
{
xtype: 'grid',
store: store,
selModel: Ext.create('Ext.selection.CheckboxModel', {
mode: 'SINGLE'
}),
layout: 'fit',
columns: [
{
text: "pum",
dataIndex: 'SRD_NAME_FL',
width: 400
}
],
columnLines: true
}
if i have only one column how can i make column width = 100%
or if i have several columns - how to make last column stretch to end of grid?
For ExtJS3, set forceFit on the GridPanels viewConfig. See: http://dev.sencha.com/deploy/ext-3.4.0/docs/?class=Ext.grid.GridView
For ExtJS 4 set forceFit directly on the GridPanel: http://docs.sencha.com/ext-js/4-0/#/api/-cfg-forceFit and use it in conjunction with flex on your columns.
Example for v4
var p = Ext.Create('Ext.grid.Panel',{
forceFit: true,
columns: [{
xtype: 'gridcolumn',
header: _ll.id,
sortable: true,
resizable: false,
flex: 0, //Will not be resized
width: 60,
dataIndex: 'Id'
}, {
xtype: 'gridcolumn',
header: __ll.num,
sortable: true,
resizable: true,
flex: 1,
width: 100,
dataIndex: 'number'
}
});
Example for v3
var p = new Ext.grid.GridPanel({
viewConfig: {
forceFit: true
},
columns: [{
xtype: 'gridcolumn',
header: _ll.id,
sortable: true,
resizable: false,
fixed: true, //Will not be resized
width: 60,
dataIndex: 'Id'
}, {
xtype: 'gridcolumn',
header: __ll.num,
sortable: true,
resizable: true,
width: 100,
dataIndex: 'number'
}
});
Add flex : 1 to the column you want to stretch.
For ExtJS 4, use flex instead of width. If you set flex: 1 and there is only one column, it will take 100% width. If you have two columns and set flex: 1 on both, both will have 50% width.
Flex distributes the available width between the columns by ratio. You may for example say flex: 2 for one column and flex: 1 for two other columns and the result would be that the first one would be twice the width of the other two. You may also use decimal values for flex e.g. 0.5
Notice that if you have a single column in your grid there is a significant difference between using items:[{}] and items:{} notation.
In fact this will NOT work as expected (at least in ExtJS 4.2):
Ext.define('My.SingleColumnGrid', {
extend: 'Ext.grid.Panel',
store: {type: 'someStore'},
forceFit: true,
columns: {
items: [
{
text: 'Something',
flex: 1,
dataIndex: 'something'
}
]
}
});
If you just remove square brackets it will magically start to work as expected (i.e. you will have a single column that extends to fill grid width).
This almost drove me crazy ;-P.
set Flex to 1
Column.Flex = 1;