Column widths for DataTables on just-the-docs github page
Column widths for DataTables on just-the-docs github page
AngledLuffa
Posts: 11Questions: 1Answers: 0
Link to test case:
https://stanfordnlp.github.io/stanza/ner_models.html
Description of problem:
I continued working on the DataTables from the previous question I posted
https://datatables.net/forums/discussion/73237/datatable-on-just-the-docs-github-page#latest
The code initializing the DataTables is here:
The DataTable in question is here:
The issue I am facing this time is that the columns aren't nicely adjusting their widths. For example, the LCODE column could be extremely narrow, considering all of the values are currently 2 characters, but it still takes up as much space as the Corpus column.
The result is the data is a bit harder to read than if the columns made themselves fit a bit better. I wonder if the issue is that at the time of the column size assignment, there's no known width for the part of the page they are in. Is there a convenient way to make the columns shrink themselves to fit the text?
Thanks!
Replies
You can use
columns.widthto set the width. The width of the header text will also affect the column width, ie, the column won't be smaller than the header width even though the data in the column is smaller.Kevin
Unfortunately, it seems to be treating the current widths as a minimum width. By that I mean, if I do this, I can make all of the columns wider and wider:
etc
but if I set them to extra narrow, they don't get any narrower:
Do you have
style="width:100%"on yourtabletag? See this example. Maybe this will help.Kevin
I'm not sure how to do this, since the HTML is produced from markdown which is converted by Jekyll and just-the-docs. I've tried a few variations of
width:"50%"orwidth:"100%"in the code we use to create the DataTable, and it doesn't affect the layout any. If I look at the page source, there's no width there currently. Do you have any suggestions on how to get the appropriate width to the DataTable?I am not familiar with Jekyll. However you could try using jQuery css() before initializing Datatables to apply the style. For example:
Kevin
Not sure if this is what you meant, but if I put
at this line
https://github.com/stanfordnlp/stanza/blob/6ed5ab184818c495aa16a1b6fa20205561059fe4/_includes/head.html#L60
there is no visible effect
I took your test case page in the first post and created a test case that we can work with:
http://live.datatables.net/xilecowa/1/edit
Inspecting the
thandtdI noticed that the width was90xfor all columns. I start by removinghttps://stanfordnlp.github.io/stanza/assets/css/just-the-docs.cssand found the column widths are now set by the width of the data in the column, not90px. In this file there is this CSStd,th{min-width:90px}. I overrode that CSS in my test case, look in the CSS tab. You will need to do the same. I have no idea how to set this in your environment.Kevin
Thank you, that was exactly the insight we needed. Actually, the 90px was a previous attempt at making non-DataTable tables look nice. I set that to 10px and fixed any table cells which looked particular broken with nbsp and non-breaking hyphens.
If you want to post a summary as an Answer, I will happily accept it as an Answer
You didn't open this thread as a question so there is no option to accept the answer. Glad its working for you.
Kevin