Posted 4 months ago #
Hi,
I have a few tables, that are quite large on the horizontal (and vertical) side. The table is stretching far beyond the boundary of the theme since it is so wide. I am hoping there might be a better way to display this table without re-formatting it.
Also, I have tried adding the CSS to adjust column width individually, and it will just not work...
Here is the link:
http://goo.gl/BJ95F
any thoughts???
Hi,
thanks for your post.
The problem simply is that there is too much content in your table. It obviously has to go somewhere, and as the available space is not sufficient, it extends.
You could try to make the table scrollable horizontally (no guarantee that it works). To do that, please add
"sScrollX": "100%", "bScrollCollapse": trueto the "Custom Commands" textfield in the "DataTables JavaScript features" section on the "Edit" screen of your table.
Regards,
Tobias
Posted 4 months ago #
wow, thanks for the quick response! I didn't think there would be much to do with so much content. Unless you could somehow collapse certain columns by default, and the user could expand them if they chose. Don't know if that is possible though.
Will the above solution address the column width? I would still like to be able to adjust each column individually, yet the CSS as suggested in the FAQ does not seem to take effect?
Again thanks for the great plugin and quick help!
Hi,
no, I'm not a aware of a possibility to dynamically hide/expand columns, sorry :-(
The above solution will make the table scrollable, so that it does not extend on the right side.
It won't directly influence the column widths. That's something required more effort on your table, just because it is (from the perspective of the CSS code) too wide to the place that it can actually have.
To get more control, you could try to first set a width on the entire table. This should then enable you to change the indiviual column widths as well.
For example, try adding this "Custom CSS":
.wp-table-reloaded-id-11 {
width: 2000px !important;
}(where you can play around with the number of course).
Regards,
Tobias
Posted 4 months ago #
Tobias,
Setting the full table width first allowed me to individually adjust each column perfectly. Thanks!
Unfortunately, the horizontal scroll code did not work. In fact, it seemed to disable selecting the data tables javascript options for that table. I had to re-import the table, and it is working again. I think that would be a good feature to include in future releases!
Thanks for the continued support!
Hi,
good to hear that the table width changing worked.
I can't really see why that scrolling code should deactivate the checkbox.
Can you maybe add it again so that I can see I what happens to the table?
Regards,
Tobias
Posted 4 months ago #
Tobias,
It looks like after I added the code the second time, it worked perfectly! The table now stays within the border of the theme, and scrolls horizontally. Also, the check box is still active.
I am not sure why it didn't work the first time, but its working great now!
Thanks again!
Hi,
ah, very nice! Thanks for trying again. Great to see that it works now! :-)
Best wishes,
Tobias
Posted 4 months ago #
Tobias,
I took a look at it using Firefox & Safari and the header columns are very misaligned.
But it looks perfect in Chrome, and IE???
I tried troubleshooting the CSS, but could not figure out the cause...
Any ideas?
Hi,
yes, indeed, there's some extra margin.
Please try adding the following to the "Custom CSS" textarea on the "Plugin Options" screen of WP-Table Reloaded to remove it:
.dataTables_scrollHeadInner .wp-table-reloaded {
margin: 0!important;
}Best wishes,
Tobias
Posted 4 months ago #
Thanks Tobias,
I plugged that in, and it looks like it fixed it in safari, however Firefox still seems to have the header misaligned.
Any other thoughts???
Donation coming your way for your awesome support of your plugin.
Thanks again!
Hi,
mmh, that's odd. I don't have a Firefox to test right now, but I might be able to test it tomorrow.
Could this maybe be a caching problem? Can you try clearing the browser cache?
Regards,
Tobias
Posted 4 months ago #
Hmm, it doesn't look like clearing the cache solved the problem... if there is any other assistance you could offer, it would be much appreciated.
Thanks again.
Hi,
ok, I have found another piece of CSS code that should fix this.
First, please remove the CSS from my previous post again, and replace that with
.dataTable_scroll {
clear: both;
}
.dataTables_scroll .wp-table-reloaded {
margin: 0!important;
}That should fix the issues in Firefox.
Regards,
Tobias
Posted 3 months ago #
Tobias,
Hmm, that seemed to have no effect on Firefox... I cleared cache, and tried on multiple computers, but the result was the same..? Did it work on your end?
Thanks!
Hi,
ah, one more try :-)
.dataTable_scroll,
.dataTables_scrollHead {
clear: both;
}
.dataTables_scroll .wp-table-reloaded {
margin: 0!important;
}Best wishes,
Tobias
You must log in to post.
