Some CSS styles are not applied, e.g. those for tables #10496
Answered
by
joelostblom
joelostblom
asked this question in
Q&A
-
DescriptionI'm struggling with getting some css classes to be rendered by quarto. In the docs, it seems like tables should be rendered with nice formatting such as lines separating rows:
and that CSS classes could be applied:
However, when I try those examples I get the following appearance where it seems like the styling has not been applied correctly:
I noticed a few other things that did not rendered and some that did, here is a full source document with its output (1-3 not working as expected, while 4-5 does): ---
format: html
---
## 1
| Default | Left | Right | Center |
|---------|:-----|------:|:------:|
| 12 | 12 | 12 | 12 |
| 123 | 123 | 123 | 123 |
| 1 | 1 | 1 | 1 |
: Demonstration of pipe table syntax
## 2
| fruit | price |
|--------|--------|
| apple | 2.05 |
| pear | 1.37 |
| orange | 3.09 |
: Fruit prices {.striped .hover}
## 3
::::: {#special .sidebar}
::: {.warning}
Here is a warning.
:::
More content.
:::::
## 4
:::{.callout-note}
Note that there are five types of callouts, including:
`note`, `tip`, `warning`, `caution`, and `important`.
:::
## 5
::: {.border}
This content can be styled with a border
:::
|
Beta Was this translation helpful? Give feedback.
Answered by
joelostblom
Aug 12, 2024
Replies: 1 comment 7 replies
-
|
I cannot reproduce (development and 1.5.56) thus you have something in your environment you've set and forgot about it such as a PS: I don't what what you are trying to do or what the non table examples have to do here but the classes needs to exist (and have a meaning in the Quarto CSS/HTML layout) for them to work ( 
|
Beta Was this translation helpful? Give feedback.
7 replies
-
|
Thanks for trying it out and confirming that it works for you. Interestingly, I don't have any other file in this demo folder, just the single qmd test file I shared. I have tried running both The additional examples I added was to check if I only had issues with rendering tables or also other classes/bootstrap elements. The classes I used were all from the docs, but I missed that some of them didn't exist (and were probably used for another purpose in the docs). Here is the full code of the HTML file that is generated from Click to see the full HTML file content<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"><head>
<meta charset="utf-8">
<meta name="generator" content="quarto-1.5.55">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<title>styling-issue</title>
<style>
code{white-space: pre-wrap;}
span.smallcaps{font-variant: small-caps;}
div.columns{display: flex; gap: min(4vw, 1.5em);}
div.column{flex: auto; overflow-x: auto;}
div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
ul.task-list{list-style: none;}
ul.task-list li input[type="checkbox"] {
width: 0.8em;
margin: 0 0.8em 0.2em -1em; /* quarto-specific, see https://github.com/quarto-dev/quarto-cli/issues/4556 */
vertical-align: middle;
}
</style>
<script src="styling-issue_files/libs/clipboard/clipboard.min.js"></script>
<script src="styling-issue_files/libs/quarto-html/quarto.js"></script>
<script src="styling-issue_files/libs/quarto-html/popper.min.js"></script>
<script src="styling-issue_files/libs/quarto-html/tippy.umd.min.js"></script>
<script src="styling-issue_files/libs/quarto-html/anchor.min.js"></script>
<link href="styling-issue_files/libs/quarto-html/tippy.css" rel="stylesheet">
<link href="styling-issue_files/libs/quarto-html/quarto-syntax-highlighting.css" rel="stylesheet" id="quarto-text-highlighting-styles">
<script src="styling-issue_files/libs/bootstrap/bootstrap.min.js"></script>
<link href="styling-issue_files/libs/bootstrap/bootstrap-icons.css" rel="stylesheet">
<link href="styling-issue_files/libs/bootstrap/bootstrap.min.css" rel="stylesheet" id="quarto-bootstrap" data-mode="light">
</head>
<body class="fullcontent">
<div id="quarto-content" class="page-columns page-rows-contents page-layout-article">
<main class="content" id="quarto-document-content">
<section id="section" class="level2">
<h2 class="anchored" data-anchor-id="section">1</h2>
<table class="caption-top">
<caption>Demonstration of pipe table syntax</caption>
<thead>
<tr>
<th>Default</th>
<th style="text-align: left;">Left</th>
<th style="text-align: right;">Right</th>
<th style="text-align: center;">Center</th>
</tr>
</thead>
<tbody>
<tr>
<td>12</td>
<td style="text-align: left;">12</td>
<td style="text-align: right;">12</td>
<td style="text-align: center;">12</td>
</tr>
<tr>
<td>123</td>
<td style="text-align: left;">123</td>
<td style="text-align: right;">123</td>
<td style="text-align: center;">123</td>
</tr>
<tr>
<td>1</td>
<td style="text-align: left;">1</td>
<td style="text-align: right;">1</td>
<td style="text-align: center;">1</td>
</tr>
</tbody>
</table>
</section>
<section id="section-1" class="level2">
<h2 class="anchored" data-anchor-id="section-1">2</h2>
<table class="table-striped table-hover caption-top">
<caption>Fruit prices</caption>
<thead>
<tr>
<th>fruit</th>
<th>price</th>
</tr>
</thead>
<tbody>
<tr>
<td>apple</td>
<td>2.05</td>
</tr>
<tr>
<td>pear</td>
<td>1.37</td>
</tr>
<tr>
<td>orange</td>
<td>3.09</td>
</tr>
</tbody>
</table>
</section>
<section id="section-2" class="level2">
<h2 class="anchored" data-anchor-id="section-2">3</h2>
<div class="callout callout-style-default callout-note callout-titled">
<div class="callout-header d-flex align-content-center">
<div class="callout-icon-container">
<i class="callout-icon"></i>
</div>
<div class="callout-title-container flex-fill">
Note
</div>
</div>
<div class="callout-body-container callout-body">
<p>Note that there are five types of callouts, including: <code>note</code>, <code>tip</code>, <code>warning</code>, <code>caution</code>, and <code>important</code>.</p>
</div>
</div>
</section>
</main>
<!-- /main column -->
<script id="quarto-html-after-body" type="application/javascript">
window.document.addEventListener("DOMContentLoaded", function (event) {
const toggleBodyColorMode = (bsSheetEl) => {
const mode = bsSheetEl.getAttribute("data-mode");
const bodyEl = window.document.querySelector("body");
if (mode === "dark") {
bodyEl.classList.add("quarto-dark");
bodyEl.classList.remove("quarto-light");
} else {
bodyEl.classList.add("quarto-light");
bodyEl.classList.remove("quarto-dark");
}
}
const toggleBodyColorPrimary = () => {
const bsSheetEl = window.document.querySelector("link#quarto-bootstrap");
if (bsSheetEl) {
toggleBodyColorMode(bsSheetEl);
}
}
toggleBodyColorPrimary();
const icon = "";
const anchorJS = new window.AnchorJS();
anchorJS.options = {
placement: 'right',
icon: icon
};
anchorJS.add('.anchored');
const isCodeAnnotation = (el) => {
for (const clz of el.classList) {
if (clz.startsWith('code-annotation-')) {
return true;
}
}
return false;
}
const onCopySuccess = function(e) {
// button target
const button = e.trigger;
// don't keep focus
button.blur();
// flash "checked"
button.classList.add('code-copy-button-checked');
var currentTitle = button.getAttribute("title");
button.setAttribute("title", "Copied!");
let tooltip;
if (window.bootstrap) {
button.setAttribute("data-bs-toggle", "tooltip");
button.setAttribute("data-bs-placement", "left");
button.setAttribute("data-bs-title", "Copied!");
tooltip = new bootstrap.Tooltip(button,
{ trigger: "manual",
customClass: "code-copy-button-tooltip",
offset: [0, -8]});
tooltip.show();
}
setTimeout(function() {
if (tooltip) {
tooltip.hide();
button.removeAttribute("data-bs-title");
button.removeAttribute("data-bs-toggle");
button.removeAttribute("data-bs-placement");
}
button.setAttribute("title", currentTitle);
button.classList.remove('code-copy-button-checked');
}, 1000);
// clear code selection
e.clearSelection();
}
const getTextToCopy = function(trigger) {
const codeEl = trigger.previousElementSibling.cloneNode(true);
for (const childEl of codeEl.children) {
if (isCodeAnnotation(childEl)) {
childEl.remove();
}
}
return codeEl.innerText;
}
const clipboard = new window.ClipboardJS('.code-copy-button:not([data-in-quarto-modal])', {
text: getTextToCopy
});
clipboard.on('success', onCopySuccess);
if (window.document.getElementById('quarto-embedded-source-code-modal')) {
// For code content inside modals, clipBoardJS needs to be initialized with a container option
// TODO: Check when it could be a function (https://github.com/zenorocha/clipboard.js/issues/860)
const clipboardModal = new window.ClipboardJS('.code-copy-button[data-in-quarto-modal]', {
text: getTextToCopy,
container: window.document.getElementById('quarto-embedded-source-code-modal')
});
clipboardModal.on('success', onCopySuccess);
}
var localhostRegex = new RegExp(/^(?:http|https):\/\/localhost\:?[0-9]*\//);
var mailtoRegex = new RegExp(/^mailto:/);
var filterRegex = new RegExp('/' + window.location.host + '/');
var isInternal = (href) => {
return filterRegex.test(href) || localhostRegex.test(href) || mailtoRegex.test(href);
}
// Inspect non-navigation links and adorn them if external
var links = window.document.querySelectorAll('a[href]:not(.nav-link):not(.navbar-brand):not(.toc-action):not(.sidebar-link):not(.sidebar-item-toggle):not(.pagination-link):not(.no-external):not([aria-hidden]):not(.dropdown-item):not(.quarto-navigation-tool):not(.about-link)');
for (var i=0; i<links.length; i++) {
const link = links[i];
if (!isInternal(link.href)) {
// undo the damage that might have been done by quarto-nav.js in the case of
// links that we want to consider external
if (link.dataset.originalHref !== undefined) {
link.href = link.dataset.originalHref;
}
}
}
function tippyHover(el, contentFn, onTriggerFn, onUntriggerFn) {
const config = {
allowHTML: true,
maxWidth: 500,
delay: 100,
arrow: false,
appendTo: function(el) {
return el.parentElement;
},
interactive: true,
interactiveBorder: 10,
theme: 'quarto',
placement: 'bottom-start',
};
if (contentFn) {
config.content = contentFn;
}
if (onTriggerFn) {
config.onTrigger = onTriggerFn;
}
if (onUntriggerFn) {
config.onUntrigger = onUntriggerFn;
}
window.tippy(el, config);
}
const noterefs = window.document.querySelectorAll('a[role="doc-noteref"]');
for (var i=0; i<noterefs.length; i++) {
const ref = noterefs[i];
tippyHover(ref, function() {
// use id or data attribute instead here
let href = ref.getAttribute('data-footnote-href') || ref.getAttribute('href');
try { href = new URL(href).hash; } catch {}
const id = href.replace(/^#\/?/, "");
const note = window.document.getElementById(id);
if (note) {
return note.innerHTML;
} else {
return "";
}
});
}
const xrefs = window.document.querySelectorAll('a.quarto-xref');
const processXRef = (id, note) => {
// Strip column container classes
const stripColumnClz = (el) => {
el.classList.remove("page-full", "page-columns");
if (el.children) {
for (const child of el.children) {
stripColumnClz(child);
}
}
}
stripColumnClz(note)
if (id === null || id.startsWith('sec-')) {
// Special case sections, only their first couple elements
const container = document.createElement("div");
if (note.children && note.children.length > 2) {
container.appendChild(note.children[0].cloneNode(true));
for (let i = 1; i < note.children.length; i++) {
const child = note.children[i];
if (child.tagName === "P" && child.innerText === "") {
continue;
} else {
container.appendChild(child.cloneNode(true));
break;
}
}
if (window.Quarto?.typesetMath) {
window.Quarto.typesetMath(container);
}
return container.innerHTML
} else {
if (window.Quarto?.typesetMath) {
window.Quarto.typesetMath(note);
}
return note.innerHTML;
}
} else {
// Remove any anchor links if they are present
const anchorLink = note.querySelector('a.anchorjs-link');
if (anchorLink) {
anchorLink.remove();
}
if (window.Quarto?.typesetMath) {
window.Quarto.typesetMath(note);
}
// TODO in 1.5, we should make sure this works without a callout special case
if (note.classList.contains("callout")) {
return note.outerHTML;
} else {
return note.innerHTML;
}
}
}
for (var i=0; i<xrefs.length; i++) {
const xref = xrefs[i];
tippyHover(xref, undefined, function(instance) {
instance.disable();
let url = xref.getAttribute('href');
let hash = undefined;
if (url.startsWith('#')) {
hash = url;
} else {
try { hash = new URL(url).hash; } catch {}
}
if (hash) {
const id = hash.replace(/^#\/?/, "");
const note = window.document.getElementById(id);
if (note !== null) {
try {
const html = processXRef(id, note.cloneNode(true));
instance.setContent(html);
} finally {
instance.enable();
instance.show();
}
} else {
// See if we can fetch this
fetch(url.split('#')[0])
.then(res => res.text())
.then(html => {
const parser = new DOMParser();
const htmlDoc = parser.parseFromString(html, "text/html");
const note = htmlDoc.getElementById(id);
if (note !== null) {
const html = processXRef(id, note);
instance.setContent(html);
}
}).finally(() => {
instance.enable();
instance.show();
});
}
} else {
// See if we can fetch a full url (with no hash to target)
// This is a special case and we should probably do some content thinning / targeting
fetch(url)
.then(res => res.text())
.then(html => {
const parser = new DOMParser();
const htmlDoc = parser.parseFromString(html, "text/html");
const note = htmlDoc.querySelector('main.content');
if (note !== null) {
// This should only happen for chapter cross references
// (since there is no id in the URL)
// remove the first header
if (note.children.length > 0 && note.children[0].tagName === "HEADER") {
note.children[0].remove();
}
const html = processXRef(null, note);
instance.setContent(html);
}
}).finally(() => {
instance.enable();
instance.show();
});
}
}, function(instance) {
});
}
let selectedAnnoteEl;
const selectorForAnnotation = ( cell, annotation) => {
let cellAttr = 'data-code-cell="' + cell + '"';
let lineAttr = 'data-code-annotation="' + annotation + '"';
const selector = 'span[' + cellAttr + '][' + lineAttr + ']';
return selector;
}
const selectCodeLines = (annoteEl) => {
const doc = window.document;
const targetCell = annoteEl.getAttribute("data-target-cell");
const targetAnnotation = annoteEl.getAttribute("data-target-annotation");
const annoteSpan = window.document.querySelector(selectorForAnnotation(targetCell, targetAnnotation));
const lines = annoteSpan.getAttribute("data-code-lines").split(",");
const lineIds = lines.map((line) => {
return targetCell + "-" + line;
})
let top = null;
let height = null;
let parent = null;
if (lineIds.length > 0) {
//compute the position of the single el (top and bottom and make a div)
const el = window.document.getElementById(lineIds[0]);
top = el.offsetTop;
height = el.offsetHeight;
parent = el.parentElement.parentElement;
if (lineIds.length > 1) {
const lastEl = window.document.getElementById(lineIds[lineIds.length - 1]);
const bottom = lastEl.offsetTop + lastEl.offsetHeight;
height = bottom - top;
}
if (top !== null && height !== null && parent !== null) {
// cook up a div (if necessary) and position it
let div = window.document.getElementById("code-annotation-line-highlight");
if (div === null) {
div = window.document.createElement("div");
div.setAttribute("id", "code-annotation-line-highlight");
div.style.position = 'absolute';
parent.appendChild(div);
}
div.style.top = top - 2 + "px";
div.style.height = height + 4 + "px";
div.style.left = 0;
let gutterDiv = window.document.getElementById("code-annotation-line-highlight-gutter");
if (gutterDiv === null) {
gutterDiv = window.document.createElement("div");
gutterDiv.setAttribute("id", "code-annotation-line-highlight-gutter");
gutterDiv.style.position = 'absolute';
const codeCell = window.document.getElementById(targetCell);
const gutter = codeCell.querySelector('.code-annotation-gutter');
gutter.appendChild(gutterDiv);
}
gutterDiv.style.top = top - 2 + "px";
gutterDiv.style.height = height + 4 + "px";
}
selectedAnnoteEl = annoteEl;
}
};
const unselectCodeLines = () => {
const elementsIds = ["code-annotation-line-highlight", "code-annotation-line-highlight-gutter"];
elementsIds.forEach((elId) => {
const div = window.document.getElementById(elId);
if (div) {
div.remove();
}
});
selectedAnnoteEl = undefined;
};
// Handle positioning of the toggle
window.addEventListener(
"resize",
throttle(() => {
elRect = undefined;
if (selectedAnnoteEl) {
selectCodeLines(selectedAnnoteEl);
}
}, 10)
);
function throttle(fn, ms) {
let throttle = false;
let timer;
return (...args) => {
if(!throttle) { // first call gets through
fn.apply(this, args);
throttle = true;
} else { // all the others get throttled
if(timer) clearTimeout(timer); // cancel #2
timer = setTimeout(() => {
fn.apply(this, args);
timer = throttle = false;
}, ms);
}
};
}
// Attach click handler to the DT
const annoteDls = window.document.querySelectorAll('dt[data-target-cell]');
for (const annoteDlNode of annoteDls) {
annoteDlNode.addEventListener('click', (event) => {
const clickedEl = event.target;
if (clickedEl !== selectedAnnoteEl) {
unselectCodeLines();
const activeEl = window.document.querySelector('dt[data-target-cell].code-annotation-active');
if (activeEl) {
activeEl.classList.remove('code-annotation-active');
}
selectCodeLines(clickedEl);
clickedEl.classList.add('code-annotation-active');
} else {
// Unselect the line
unselectCodeLines();
clickedEl.classList.remove('code-annotation-active');
}
});
}
const findCites = (el) => {
const parentEl = el.parentElement;
if (parentEl) {
const cites = parentEl.dataset.cites;
if (cites) {
return {
el,
cites: cites.split(' ')
};
} else {
return findCites(el.parentElement)
}
} else {
return undefined;
}
};
var bibliorefs = window.document.querySelectorAll('a[role="doc-biblioref"]');
for (var i=0; i<bibliorefs.length; i++) {
const ref = bibliorefs[i];
const citeInfo = findCites(ref);
if (citeInfo) {
tippyHover(citeInfo.el, function() {
var popup = window.document.createElement('div');
citeInfo.cites.forEach(function(cite) {
var citeDiv = window.document.createElement('div');
citeDiv.classList.add('hanging-indent');
citeDiv.classList.add('csl-entry');
var biblioDiv = window.document.getElementById('ref-' + cite);
if (biblioDiv) {
citeDiv.innerHTML = biblioDiv.innerHTML;
}
popup.appendChild(citeDiv);
});
return popup.innerHTML;
});
}
}
});
</script>
</div> <!-- /content -->
</body></html>Source code of qmd file with only three examples: ---
format: html
---
## 1
| Default | Left | Right | Center |
|---------|:-----|------:|:------:|
| 12 | 12 | 12 | 12 |
| 123 | 123 | 123 | 123 |
| 1 | 1 | 1 | 1 |
: Demonstration of pipe table syntax
## 2
| fruit | price |
|--------|--------|
| apple | 2.05 |
| pear | 1.37 |
| orange | 3.09 |
: Fruit prices {.striped .hover}
## 3
:::{.callout-note}
Note that there are five types of callouts, including:
`note`, `tip`, `warning`, `caution`, and `important`.
:::
The output from .
├── styling-issue_files
│ └── libs
│ ├── bootstrap
│ │ ├── bootstrap-icons.css
│ │ ├── bootstrap-icons.woff
│ │ ├── bootstrap.min.css
│ │ └── bootstrap.min.js
│ ├── clipboard
│ │ └── clipboard.min.js
│ └── quarto-html
│ ├── anchor.min.js
│ ├── popper.min.js
│ ├── quarto-syntax-highlighting.css
│ ├── quarto.js
│ ├── tippy.css
│ └── tippy.umd.min.js
├── styling-issue.html
└── styling-issue.qmd
5 directories, 13 files |
Beta Was this translation helpful? Give feedback.
-
|
I suggest you try your Quarto document at another location on your computer. |
Beta Was this translation helpful? Give feedback.
-
|
I tried it from a few different location, but same result. However, I just tried to downgrade from v1.5.55 to v1.4.550 and it seems to work. This was via |
Beta Was this translation helpful? Give feedback.
Answer selected by
joelostblom
-
|
The last stable version is 1.5.56. |
Beta Was this translation helpful? Give feedback.
-
|
Unfortunately that version is not released on conda. You can see the available releases here https://anaconda.org/conda-forge/quarto/files. I prefer to use conda since it makes it easier to manage the R and Python dependencies quarto relies on. |
Beta Was this translation helpful? Give feedback.
-
|
I don't see the benefits of using Conda for Quarto. version="1.5.56"
architecture="$(dpkg --print-architecture)"
download_url="https://github.com/quarto-dev/quarto-cli/releases/download/v${version}/quarto-${version}-linux-${architecture}.deb"
curl -sLo "quarto.deb" "${download_url}"
dpkg -i "quarto.deb"Anyhow, on latest stable and current development version the issue you reported is not there. |
Beta Was this translation helpful? Give feedback.
-
|
Good point, I will try using conda just for managing the R/py dependencies and have a global quarto installation so that I can stay on the latest pre-release |
Beta Was this translation helpful? Give feedback.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
I tried it from a few different location, but same result. However, I just tried to downgrade from v1.5.55 to v1.4.550 and it seems to work. This was via
conda, and I also tried installing the 1.6.4 pre-release system wide (no conda package for that one yet), and it also works. So I guess that either there was a regression for 1.5.55 or I have a global config linked to that specific version somehow (I tried in a fresh env and could reproduce the issue with 1.5.55). I'll use the global pre-release package for now, thanks for the help!