I created a table with DataTable library (that is using foundation-zurb 5.5.3), Per the below image I'm seeing both in Chrome as in IE 11 that the most right column header does not align with the other rows when you first open up the page. The actual webpage is http://iprobesolutions.com/learn/wireless-conference-system-comparison. However if I open devtools to try and inspect the code the issue dissappears! When I refresh with CTRL+ F5 it however reappears.
The issue does not appear when I create this fiddle: http://jsfiddle.net/setbon/x75o53ck/
Below is just a small part of the code pasted. I'd really appreciate if you could look at the webpage since this is where the issue is displayed...perhaps a bug in IE and Chrome ?
<table id="example" class="display nowrap table1 compact">
I see you are loading the Datatables FixedHeader code. I don't see how or if you are using it but its not compatible with scrollX and scrollY:
https://datatables.net/extensions/fixedheader/
Try removing either FixHeader or the scrolling options.
Usually these type of issues occur when table is hidden when initialized and then becomes visible in a tab, modal dialog, etc.
In most cases the solution is to call
columns.adjust() to recalculate column widths once table becomes visible.
table.columns.adjust();
When I ran the code above after your table is initialized, the issue disappears.
I cannot explain why this issue occurs with your table. I'm not familiar with Foundation framework, but I don't think you have to call foundation() when initializing the table.
See jQuery DataTables: Column width issues with Bootstrap tabs for more information, examples and details.
Related
My problem is the next:
I have a table in which I store information, by clicking on a row there will be a window in which I show that information in a certain format.
The problem I have when I try to make the table responsive because when trying to see it on small devices I have to do side scroll. I tried to hide columns with "display: hidden" but the data I can not retrieve, beacuse it not exists.
How can i do this?
Do yourself a favor - do not reinvent the wheel and use a specialized library, for example Datatables. At the very least, take a look at how datatables makes the table responsive.
You have not mentioned it, so I assume you are ok using jQuery, Bootstrap 3 or 4, Semantic UI or Foundation. For React / Angular there maybe other options.
I am trying to build an admin dashboard using material design framework. As a part of it, I am trying to add modal-trigger element inside a <td></td> tag of a table that uses datatable.js library. But when I click on the trigger no modal is appearing. Did anyone face similar issue before?
I think that what's happening is that your trigger isn't in the DOM when you draw the table, but without seeing your code I can't be sure. Generally, it will trigger a modal when it is clicked or something? You might want to change the actual triggering to clicking on a td with a given class contained within the table so something like this:
$(".modal-trigger").click(function(){//Open Modal});
This would work on the first page but not after the first draw of the table as the event had been registered before the elements were within the DOM. Rather, you'd need to listen to the click within the table like this:
$("#table-id").on("click", ".modal-trigger", function(){//Open Modal});
I hope that makes sense and that it helps, if not perhaps work up a JSFiddle illustrating your issue?
in my table I show/hide columns based on their class attribute. Everything works fine except that that the animation of the "columnToggle"-Button does not change. Therefor it is hard to see which groups have been selected.
Here is a test case on Datatables live with the same behavior : DataTables Live Example
What am I missing? Thanks for your help.
sanJo
It is a bug in the current version of Datatables. The "active" argument is not set properly. My workaround was to toggle the "active" argument with jquery toggleClass function.
Is it possible to have the Safari web Inspector retain the position that the DOM tree is expanded to?
At present, you expand the DOM tree to an element and then as soon as the page is refreshed the entire DOM structure is collapsed again necessitating drilling right the way back to the original element.
I saw this post on the subject a couple of years back but the code has now changed so it doesn't apply.
I have also opened a bug report at the WebKit bug tracker.
That bug ended up getting fixed: https://bugs.webkit.org/show_bug.cgi?id=121665
I am using a Widget that contains a DataGrid object. The Widget works fine when included in the first tab (this is the visible tab), but not when I use the same code on a second tab.
The code is the same I have done several checks to make sure there are no other problems - and non Grid code is rendering fine - only the grid that has a problem. I have tried setting the height and width manually and this just results in a large grey rectangle on the second tab.
Do I need to tell the Grid to refresh in some way - or is it a property for the TabContainer?
Help - this is driving me mad!
Yeah, that's a big problem with the grid. If you use it declaritively in a tab container, it won't render properly on the non-visible tabs. It needs to calculate height/width (even though you specify them)...as you have seen.
The way I got around it was to create the grids programatically on tab select. I posted about my solution on the dojo forums. My code sample is over on github. It's a bit too large to post here methinks. Let me know if you want it, and i'll edit my answer.
There's also a discussion on nabble with a different solution.
"resize" works like a charm! Been looking for this for a long time (didn't know what I had to search for), thanks.
I use this routine to dynamically determine if the tab has more than one datagrid, as I may not know the ID of one single grid, maybe someone else might use that, too:
dojo.query('div#container div[id^="gridNode_"]').forEach(function(node, index, arr) {
dijit.byId(node.id).resize();
});
This will check the div with id="container" (skip that part if you want to search the whole DOM) for divs with an id starting with "gridNode_" and apply "resize" to those widgets.
An alternate approach is to resize the grid upon tab element selection. Sample code
dojo.connect(dijit.byId('my_tab_container'), "selectChild", function(child){
// if second tab (could be any...) selected
if(child.id == 'mySecondTabId'){
var myGrid = dijit.byId('myGridInsideTabId');
if(myGrid != null) myGrid.resize();
}
});