Jekyll DataTables below sidebar

Question

I use minima theme for my Jekyll blog, and I created a custom sidebar through the file sidebar.html under the folder _includes.

<!-- Side navigation -->
<sidebar>
    {% for item in site.data.nav.toc %}
        <h3>{{ item.title }}</h3>
        <ul>
            {% for entry in item.subfolderitems %}
            <li><a href="{{ entry.url }}">{{ entry.page }}</a></li>
            {% endfor %}
        </ul>
    {% endfor %}
</sidebar>

The TOC is under _data in a file called nav.yml.

toc:
- title: Research
  subfolderitems:
    - page: Crime Categories
      url: /posts/crime-categories/

I include this sidebar in default.html in the folder _layouts.

<!DOCTYPE html>
<html lang="{{ page.lang | default: site.lang | default: "en" }}">


  {%- include head.html -%}

  <body>
    {%- include header.html -%}

  

    <main class="page-content" aria-label="Content">

      {% include sidebar.html %}
      
      <div class="wrapper">
        {{ content }}
      </div>
    </main>

    {%- include footer.html -%}
    
  </body>

</html>

Then in the minima folder under the _sass folder, I add the sidebar into the _base.scss file.

/**
 * `main` element
 */
main {
  display: block; /* Default value of `display` of `main` element is 'inline' in IE 11. */
}

/**
 * sidebar element
 */
sidebar {
  float:left;
}

Currently, the DataTable element is in a blog post in the folder _posts.

---
layout: post
title: Sample page
date: 2022-8-25 9:00:01 --0000
permalink: /posts/sample-page/
datatable: true
---

Food    | Quantity sold | Time sold         | Cashier
------- | ------------- | ----------------- | -----------
Apples  |   5           | 8-25-2022 9:00:01 | Bearbear
Bananas |   10          | 8-25-2022 9:03:55 | Racc
Kiwis   |   3           | 8-25-2022 9:06:37 | Mickey
Oranges |   5           | 8-25-2022 9:07:24 | Bearbear
{: .datatable}

However, the table appears under the sidebar.

The way DataTables is implemented is through the following code in the head.html file:

<head>
    <!--The lines below help include JQuery DataTables into Markdown files-->
    {%- if page.datatable == true -%}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>  <!--Add JQuery-->
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.css"> <!--add style sheet-->
    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.js"></script> <!--add dataTables-->
    <script>
        $(document).ready( function () {
        $('table.datatable').DataTable();
        } );
    </script>
    {% endif %}
</head>

There is plenty of space for the datatable to be on the right of the sidebar. Does anyone know where the problem may be?

I found the following code in the `_base.scss` file:```/** * Tables */ table { margin-bottom: $spacing-unit; width: 100%; text-align: $table-text-align; color: lighten($text-color, 18%); border-collapse: collapse; border: 1px solid $grey-color-light; }``` Should the class option be added here? The way the table is displayed in the browser is `
` — Life is Good, Oct 07 '22 at 14:23
It happens to me when I remove float:left, which is weird anyway. — Christian, Oct 08 '22 at 06:10

Christian · Accepted Answer · 2022-10-17T21:51:44.837

1

The float left is weird in this flexbox layout.

I have added flex to the page-content class in sass/minima/_layout.scss

.page-content {
    padding: 30px 0;
    flex: 1 0 auto;
    display: flex;
}

and a min-width (and max-width because I could not decide) to the sidebar CSS definition in _sass/minima/_layout.scss (or custom-styles.scss)

sidebar {
    min-width: 200px;
    max-width: 300px;
}

I have uploaded my test page to GitHub:
https://github.com/cadamini/jekyll-minima-sidebar-test

Based on your comment, I have added some more changes to the CSS and HTML, also in the header, in this commit. There are some comments in the commit to explain what I have done.

edited Oct 17 '22 at 21:51

answered Oct 08 '22 at 06:26

Christian

4,902
4
24
42

Thank you for the repo and for pointing out the specific places where code can be improved. Currently the table is on the right of the sidebar - yay! However, the Title has gotten to the right of the sidebar as well (still above the sidebar and the main content since it is part of the header). If the title can go back to the upper left corner that would be most fantastic! – Life is Good Oct 11 '22 at 15:25
1

Thanks for making the changes to the repo and sorry that your WSL striked! I have noticed that you made changes related to the header. I have made some tweaks to my blog backend based on yours, and I will make further tweaks if needed. If all else fails, I will attempt to replace my code with yours. – Life is Good Oct 17 '22 at 17:58
I forked your repo and tested it in my own browser, and the header works really nice, thanks! However, there seems to be a gap between the sidebar and the body of the blog. Do you have any idea why this is the case? Would it have something to do with the footer, or is it unrelated? – Life is Good Oct 18 '22 at 15:47
You'd need to share a screenshot. Of course, you can also try to use the browser dev tools and try to find out yourself. – Christian Oct 20 '22 at 02:31

Jekyll DataTables below sidebar

1 Answers1