Column widths for DataTables on just-the-docs github page

AngledLuffa

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:

https://github.com/stanfordnlp/stanza/blob/6ed5ab184818c495aa16a1b6fa20205561059fe4/_includes/head.html#L40

The DataTable in question is here:

https://github.com/stanfordnlp/stanza/blob/6ed5ab184818c495aa16a1b6fa20205561059fe4/_pages/ner_models.md?plain=1#L21

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!

kthorngren

You can usecolumns.width to 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

AngledLuffa

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:

                columnDefs: [
                    { targets: '_all', width: '100px' }
                ]

                columnDefs: [
                    { targets: '_all', width: '150px' }
                ]

etc

but if I set them to extra narrow, they don't get any narrower:

                columnDefs: [
                    { targets: '_all', width: '1px' }
                ]

kthorngren

Do you have style="width:100%" on your table tag? See this example. Maybe this will help.

Kevin

AngledLuffa

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%" or width:"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?

kthorngren

I am not familiar with Jekyll. However you could try using jQuery css() before initializing Datatables to apply the style. For example:

$('#my_table').css('width', '100%');

Kevin

AngledLuffa

Not sure if this is what you meant, but if I put

$(this).css('width', '100%');
$(this).css('width', '20%');
etc

at this line

https://github.com/stanfordnlp/stanza/blob/6ed5ab184818c495aa16a1b6fa20205561059fe4/_includes/head.html#L60

there is no visible effect

kthorngren

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 th and td I noticed that the width was 90x for all columns. I start by removing https://stanfordnlp.github.io/stanza/assets/css/just-the-docs.css and found the column widths are now set by the width of the data in the column, not 90px. In this file there is this CSS td,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

AngledLuffa

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.

AngledLuffa

If you want to post a summary as an Answer, I will happily accept it as an Answer

kthorngren

You didn't open this thread as a question so there is no option to accept the answer. Glad its working for you.

Kevin