Apparently Telerik thinks this is a solved problem (as it's documented). I was reading this ...
Enfocing min width on Kendo Grid (jQuery) when grid has hidden columns
... which in turn led me to telerik's documentation here ...
https://docs.telerik.com/kendo-ui/knowledge-base/apply-minimum-width-during-column-resize
which seems to imply this is done deal ...
... those columns are not >= 300px wide!
So what am i missing here ?
I need a means to say "this column MUST be no thinner than x number of pixels" and have it stick when I resize the grid however that happens.
I think this dojo example only takes in to account the grey splitter bar in the dojo and not the window being resized.
Further details
When building a grid and making it scrollable + resizable and shrinking it in height there's a scrollbar applied to the row set for the height.
I believe the same should be true horizontally and that the "grid" should shrink but it's column set should be scrollable ...
... consider that image ... the scrollbar should be part of the grid itself not below the grid.
When the grid shrinks the pager should shrink and remain visible (both sides of it), and a scrollbar be applied to the data to allow the contents of the grid to be scrolled without losing sight of any of the grid footer.
By default, Tabulator reduces the max width of the table and displays a horizontal scroll bar at the bottom of the table. Is it possible to remove this scroll bar and force tabulator to increase the width of the table (so that the horizonta scrollbar is displayed at the bottom of the browser window)?
Add this to your CSS file for the div containing the horizontal scrollbar.
overflow-x: hidden;
To make the table wider, you can enclose it within a <div> and add this to the CSS file for that particular div.
table-layout: fixed;
width: 100%;
Update
As of Tabulator v4.7 there is a built in layout mode for handling this. the fitDataTable layout mode will fit the width table to its contents:
var table = new Tabulator("#example-table", {
layout:"fitDataTable",
});
See the Layout Documentation for full details and a working example
Original Answer
There is no built in feature for allowing external scrolling of the table. The table is based in a div and so will take up 100% the width of its parent element.
It will then either handle scrolling inside the table or resize the columns to fit depending on how your table is configured.
You could make some CSS tweaks to allow this form of display but it may cause the table to malfunction under certain circumstance, depending on your configuration.
You would need to include the following CSS after the tabulator style sheet has been included:
.tabulator, .tabulator-header, .tabulator-tableHolder{
overflow:visible !important;
}
But essentially at that point you may be better off just using a standard HTML table as you seem to be disabling a lot of the features that you would use Tabulator for.
I have an intriguing problem that I thought I resolved with a janky solution, but I only half solved it. I'm using Datatables for Jquery and I'm loading in data from a database to populate the table.
I should note that been developing using Firefox.
Additionally, I have a horizontal scroll bar and the first five columns are fixed. This poses a problem because before all of the data is loaded, the datatable puts in a horizontal scroll bar. Some of the data loaded after the scroll bar is initialized is longer in length and thus makes the column widths larger.
To resolve this, I just call a resize
<script type="text/javascript">
setTimeout(function(){
window.dispatchEvent(new Event('resize'));
},2000);
</script>
What happens here is I see the page load, the table is initially messed up, but after a brief delay (a little less that 2 seconds as it should be because of the time I've given to the timeout), the table fixes itself because of the window resize.
I thought the problem was fixed, until I began testing in Chrome. The table will be initially messed up, just as it is in Firefox, but once the resize is called, the table extends horizontally, loses the horizontal scroll bar, and the chrome window gets one. That's not ideal because the point of the scroll bar is to keep the table within the width of the screen size.
To contain the width of the table, I use the following CSS:
div.dataTables_wrapper{
width: 96vw;
margin: 0 auto;
}
I define the table like so.
$(document).ready(function() {
$('#example').dataTable( {
"scrollX": true
} );
} );
new $.fn.dataTable.FixedColumns(example,{
leftColumns:5
});
Any help is appreciated.
You have to force the width of the datatables_scrollBody to 100% in order to maintain the horizontal bar visible.
.dataTables_scrollBody {
width: 100%!important;
}
I got a centered Layout including a max-width and margin: 0 auto;. Furthermore i am currently using Isotope for filtering and sorting a grid.
The Problem is: There is the possibility that the height of the body / main container becomes smaller than the actual window height and therefor of course removes the scrollbar, since the body has overflow: hidden. The centered layout jumps (because of the margin: 0 auto), which doesn't look very great.
The Question: Is there a callback function from Isotope where i could test if the scrollbar is shown or not? Or is there even a possibility to bind a function on the body when the scrollbar disappears? what is the best method to check if there is a scrollbar visible or not? (EDIT// as suggested an easy method is $(document).height > $(window).height, now i just need a triggered event to call the if statement)
Thanks in advance!
EDIT here is a LINK TO FIDDLE to play around
I have a html table and I want to freeze the header row th tag for scrolling the data. How I can do that? Does I need to use the Dom?
Thanks !!
My solution is to use two tables and fix the column widths. The lower table is in a scrollable div and has no header.
If you take Accessibility seriously, two tables is not the way to go since it breaks rules.
There are ways to do it in pure CSS, but it is a headache to get it to work in all browsers. There are a few examples out on the net, but they do not all work 100% with IE without tweaks.
I am currently working on a CSS only version, this is getting pretty close: http://www.coderanch.com/t/431995/HTML-JavaScript/Table-with-fixed-header-scolling#1918825
Does not work in IE8rc1 yet, IE6/7 has a border issue and you have to live with the scrollbar looking different in FF vs IE.
With FireFox, you can put style="height: 200px; overflow-y: auto" But to have a pure CSS version compatible with all major browsers, I've use this example since IE doesn't support syles in tbody or thead.
I have come up with a solution that sort of combines two previously mentioned ones. It uses jQuery and two tables , one for the header and one for the content. The header table is set to a width of 100% with no column widths set. At the bottom of the content table there is a row defined to match the header table with the column widths set. This row is hidden so that it is not shown, but retains the column widths.
For this example I gave my header row an ID of 'Header1' and the bottom row and ID of 'Header2'. Also I wrapped the content table inside a div with an ID of 'scrollTable'.
I set styles in my CSS file for the scrollTable ID, see below:
#scrollTable {
height:250px;
overflow-x:hidden;
overflow-y:scroll;
}
Now for the jQuery part. Basically what I'm doing here is taking the widths of the bottom row columns and setting the header columns to match. I stretch the width of the last column of the header so that it fits over the top of the scroll bar. See code below:
$(document).ready(function(){
var maxWidth = $('#Header1').width(); // Get max row Width
$('#Header2 th').each(function(i) { // Set col headers widths to to match col widths
var width = $(this).width();
$('#Header1 th').eq(i).width(width);
});
var blankSpace = maxWidth - $('#Header1').width(); // Calculate extra space
$('#Header1 th:last').width( $('#Header1 th:last').width() + blankSpace ); // Stretch last header column to fill remaining space
});
I have tested this successfully on IE 6, 7 & 8, Firefox 3.0.1.4, Chrome 3.0.195.25, Opera 10, and Safari 3.2.2 on Windows XP.
I've done it in the past using CSS by defining a height for the <TBODY> tag on my table, and using overflow:auto. This was a while ago, and I think there were some compatability problems. I don't remember precisely what they were, but this solution may work for your problem.
the best solution (the one that scales with lots of data) is to use 2 tables like aaron said, the top table has the headers, and the bottom table should have the headers as the last row (or the footer), but with opacity of 0, so that you cannot see them.
This the headers at the bottom make the bottom table have the same column widths as the top table, making things line up. make sure you style both header and footer the same.
you will also have to create a seperate scroll bar for vertical scrolling to the right of the table, because otherwise the scroll bar will mess up your widths. add a scroll event listener to set the scrolltop of the table to the scrolltop of the scrollbar, and resize the scroll bar to be the same height as the table.
its pretty easy, actually =)
Create a single table as you normally would to meet accessibility concerns. Dynamically create a new table based on the thead using jQuery (copy the thead) and inject it into the page above the first table and give it the fixed position. It should stay in place while the rest of the table scrolls, but it will still remain accessible and work with JavaScript disabled.
Have you tried this plugin from JQuery ? http://plugins.jquery.com/project/floatobject
I believe this does what you want. Check out the demo # http://amirharel.com/labs/fo/float_demo.html
Cheers!