Elizabeth Barron

Having dark mode available to enable/disable on a user-basis would be huge. I, for one, struggle to use pages that are light and prefer dark mode, but there are others with different visual needs that prefer light mode. This feels like a really basic tool that should be implemented!

This would be amazing, especially now that we've added Team Publishing and have multiple people working in the Guide Admin. The “paper trail” documentation would save us a lot of double-work and miscommunication!

Our client also requests this as they share some articles with a customer representation group during yearly meetings. We would not want to have access for these customers to our internal-facing KB. Exporting by Print Page in Chrome is horrible formatting. Export to PDF would be super helpful!

Ifra Saqlain our Guide is not available to the public, but I'm happy to provide you with any code or other information you might need. I've tried adjusting padding of table cells, but it doesn't seem to have an impact. 

Thanks Ifra Saqlain. It's a little bizarre that this is happening all of a sudden as these tables have displayed correctly in the past with no scroll bar. Even when I resize the table, it doesn't resize within the accordion. The scrollbar helps for now, but I still feel like there is a bigger issue preventing them from being resized.

I am suddenly having issues where tables are cut off in accordions (this was brought to my attention over the weekend). I've tried resizing and have tried adjusting table attributes in style.css but with no results. Any assistance?

/***** Tables *****/
.table, .article-body table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  border-spacing: 0;
  border-style: dashed;
  border-width: 1px;
}

@media (min-width: 768px) {
  .table, .article-body table {
    table-layout: auto;
  }
}

.table th, .article-body table th
.table th a, .article-body table th a {
  color: lighten($text_color, 20%);
  font-size: 13px;
  font-weight: 300;
  text-align: left;
  border: dashed 1px #333;
}

[dir="rtl"] .table th, [dir="rtl"] .table th a,
[dir="rtl"] .article-body table th, [dir="rtl"] .article-body table th a {
  text-align: right;
  border: dashed 1px #333;
}

.table tr, .article-body table tr {
  border: dashed 1px #333;
  display: block;
  padding: 5px;
}

@media (min-width: 768px) {
  .table tr, .article-body table tr {
    display: table-row;
    border: dashed 1px #333
  }
}

.table td, .article-body table td {
  display: block;
}

@media (min-width: 768px) {
  .table td, .article-body table td {
    display: table-cell;
  }
}

@media (min-width: 1024px) {
  .table td, .table th,
  .article-body table td, .article-body table th {
    padding: 20px 30px;
  }
}

@media (min-width: 768px) {
  .table td, .table th,
  .article-body table td, .article-body table th {
    padding: 10px 20px;
    height: 60px;
  }
}

I am suddenly having the same issue as Mark Rickard above, especially in accordions.

Mark, did you ever find a solution?

Ifra Saqlain I created a test article with the html you provided and ensured the code in my style.css and script.js were the same as above. 
I opened "inspect" and Console and saw "Uncaught SyntaxError: Unexpected end of input at script.js:498"

I went to github and got the copenhagen v2 script.js file from there and copied/pasted, then added the accordion js above to the bottom and it worked fine. Not sure what the issue with the static script.js was, but we seem to be ok now.

Thank you for your help! Knowledge of the Inspect > Console portion will be helpful in the future for troubleshooting as well.

Ifra Saqlain our HC isn't public, so I'm not sure the URL will be of use. Can you tell me what to look for? Or what additional information I can provide you? 

Also, for context, I just downloaded the Copenhagen v2 and was adding the script.js and style.css info from above and testing in "preview." I made the new theme "live" and still had issues, so I switched back to our legacy theme.

Thanks!

I just switched to Copenhagen v2 theme and copied over the style.css and script.js additions from here for accordions (which worked so well in v1) but now they won't expand. Help?

style.css: 

.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 12px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
  margin-bottom: 10px;
}

.accordion p {
  display: inline;
}

.active, .accordion:hover {
  background-color: #ccc;
}

.accordion:after {
  content: '\002B';
  color: #777;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

.active:after {
  content: "\2212";
}

.panel {
  padding: 0 18px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}
.accordion-div { width: 90%; }

@media(min-width:1024px){
.accordion-div { width: 100%; }
}

script.js:

document.addEventListener('DOMContentLoaded', function() {
  var acc = document.getElementsByClassName("accordion");
  var i;

  for (i = 0; i < acc.length; i++) {
    acc[i].addEventListener("click", function() {
      var panel = this.nextElementSibling;
      if (panel.style.maxHeight) {
        this.classList.toggle("active");
        panel.style.maxHeight = null;
      } else {
        let active = document.querySelectorAll(".accordion-div .accordion.active");
        for(let j = 0; j < active.length; j++){
          active[j].classList.remove("active");
          active[j].nextElementSibling.style.maxHeight = null;
        }
        this.classList.toggle("active");
        panel.style.maxHeight = panel.scrollHeight + "px";
      }
    });
  }
});