I have a table with paging.
I'm trying to fix certain columns, but don't want to get rid of the paging, I simply want to add horizontal scrolling, but not vertical.
Can this be done with the FixedColumns plugin?
I've tried specifying the options like this:
table.dataTable({
autoWidth: false,
ajax: "/Source",
deferRender: true,
//fixed Column
scrollX: true,
fixedColumns: {
leftcolumns:1
}
//
}
fix on your browser first using inspect element by changing CSS and then the final change in coding by writing *!Important** on CSS where you change. then you successfully set according to your wish.
simple replace dataTable CSS with custom CSS by writing !important.
Related
I have a table which is implemented by making use of jquery EasyUI. I want first column of the table to be freezed and remaing column should have scrollbar when the page is in smaller screen. Code Here snippet
How can I freeze only Title1 column.
I tried adding that Title1 column in Datagrid-view1 to achieve this. But I couldn't able to find proper solution ..Thanks in advance
The documentation you're looking for is here: https://www.jeasyui.com/documentation/index.php
According to the documentation, you're looking for the frozenColumns option. You take the columns you want frozen out of the columns section and add them in frozenColumns.
Something like this:
frozenColumns: [[
{field:'f1',title:'title1',width:100,editor:'text'},
]],
columns:[[
{field:'f2',title:'title2',width:100,editor:'text'},
{field:'f3',title:'title3',width:100,editor:'text'},
{field:'f4',title:'NotSave',width:50,
editor:{type:'checkbox',options:{on:1,off:0}}}
]],
You also need to turn off fitColumns.
fitColumns: false,
With these settings I get a horizontal scrollbar in the code you put up.
I'm creating tables dynamically based on user data, using Handsontable.
Question: How do I tell handsontable to adjust the height of rows and the width of columns based on the data and the available space?
Maybe this can help:
It is also possible just with CSS but probably you will have to override default min-width for td, th.
Check out this fiddle: http://jsfiddle.net/warpech/z9fYC/
or try also this:
I'm not sure if there is build in function to control this, however, there is hack using css width: in style
style: {
width:'800px'
}
A working example is here http://jsfiddle.net/FDpvV/1/
Here a hint: https://docs.handsontable.com/0.35.0/demo-scrolling.html
I have a very simple question but I don't seem to find a simple answer. In fact, I haven't found any answer how to make the paging toolbar of a Ext JS grid smaller.
I made a very simple fiddle to investigate how this works, and it looks like at some point ExtJS will dynamically calculate the positions of the elements in the paging toolbar. Specifically the 'left' css attributes are set.
So I would like to know how to tweak the function that calculates these values so I can decrease these values. I could use jQuery/Javascript to do this but that just sounds so wrong so I prefer a clean ExtJS way to do this.
So instead of something like this...
I would like to see this:
For instance, the 'previous page' button in my sample has an inline css style declared (most likely done by the paging toolbar widget) with 41px to left whereas the separator icon has 81px for the same 'left' style. This goes on until the entire width of the toolbar is covered.
So to conclude, what I want is to intercept the calculations and decrease the values of the elements to lower the entire width of the toolbar.
Any suggestions would be welcome.
First set the width of your button.
new Ext.Button({
width: 100, <<== width of the button
text: 'Smaller paging toolbar',
// ...
Then you can move your element to the right with a Toolbar Separator just before your button :
[
{xtype: 'tbseparator', width: 200 },
new Ext.Button({
// ...
Here is your corrected fiddle
Thought I'd post the answer to my own question. There's a config that enables horizontal scrolling when the toolbar gets too small:
Ext.create('Ext.PagingToolbar', {
overflowHandler: 'scroller'
}
I am quite new in jQuery DataTables. I just read about responsive table feature provided by DataTables, see this example.
Here columns are hiding on window resizing but the problem is that last column is also hiding. Can we define which column must be hidden on different window sizes?
See Class logic for fine-grained control on when each column would be visible.
For example, to always show last column:
$(document).ready(function(){
$('#example').DataTable({
responsive: true,
columnDefs: [
targets: -1,
className: 'all'
]
});
});
where columnDefs.targets set to -1 points to last column (column index counting from the right), and className: 'all' indicates that column will always be visible, regardless of the browser width.
If you can edit the HTML, you can add the data-priority="1" attribute to the th element you want NOT to be hidden. Ex:
<th data-priority="1">Last column</th>
Please help because I'm stuck from hours. I have multiple count of text areas in one page. Each text area has different content inside which makes it with different height. When I init TinyMCE like this:
tinyMCE.init({
mode: "textareas",
theme: "advanced",
width: "870",
readonly: true,
theme_advanced_path: false,
theme_advanced_resizing: true,
theme_advanced_resize_horizontal: false,
auto_resize: true
});
All text areas are with same height and those of them which have more content has scroll inside. Any ideas how to rid of the scrolls and make the text area height as much as the content inside ?
Have a look at the function resizeIframe in this SO thread. You will need to issue this code after the readonly editors have been initialized.