Search code examples
htmlsassdatatablesjekyllsidebar

Jekyll DataTables below sidebar

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. sample page

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?

Solution

  • 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.