Im working on a flexdashboard / storyboard where I would like to reduce the hight for each of the frames. Is that possible?
Example code:
---
title: "Flex"
output:
flexdashboard::flex_dashboard:
orientation: columns
vertical_layout: fill
---
```{r setup, include=FALSE}
library(flexdashboard)
```
G1 {.storyboard}
===================================================
### Frame 1
Some text and code
### Frame 2
Some text and code
G2
===================================================
### Row 1
### Row 2
I.e. remove the empty area as below:
Thanks!
The controls are in the css. Two things to change - height of the box (first css), and height of the page arrows (second css). The 'height' variable needs changing in both.
---
title: "Flex"
output:
flexdashboard::flex_dashboard:
orientation: columns
vertical_layout: fill
---
```{r setup, include=FALSE}
library(flexdashboard)
```
G1 {.storyboard}
===================================================
### Frame 1
Some text and code
### Frame 2
Some text and code
G2
===================================================
### Row 1
### Row 2
<style>
.storyboard-nav .sbframelist {
margin: 0 auto;
width: 94%;
height: 50px;
overflow: hidden;
text-shadow: none;
margin-bottom: 8px;
}
.storyboard-nav .sbnext, .storyboard-nav .sbprev {
float: left;
width: 2%;
height: 50px;
font-size: 50px;
}
</style>
Related
I made a presentation with a scrollable code chunk output using the xaringan package in R before like the photo shown below.
I want to make the same scrollable code chunk output in quarto revealjs presentation. Anyone knows how to do it in quarto presentation?
scrollable code chunk output:
If it helps, here is the css code I used before when making a presentation in xaringan.
Thank you in advance!
/* scrollable code chunk output */
.remark-code {
display: block;
overflow-x: auto;
max-height: 100%;
padding: .5em;
color: #fff;
background: rgb(131, 139, 139);
}
You just need two steps to do the same in Quarto revealjs. At first, define a css class with overflow-x: auto and then pass the class to the chunk option class-output so that output of that will have horizontal scrolling.
---
title: Output Horizontal scrolling
format: revealjs
engine: knitr
---
## Quarto
```{r}
#| class-output: hscroll
library(gapminder)
df <- dplyr::bind_cols(gapminder, gapminder, .name_repair = "minimal")
head(df)
```
```{css, echo=FALSE}
.hscroll {
overflow-x: auto;
white-space: nowrap;
}
```
And if you want to do this for code chunks, instead of passing the .hscroll class as a chunk option to a specific chunk, use the knitr opts_chunk key in the yaml section.
---
title: Output Horizontal scrolling
format: revealjs
engine: knitr
knitr:
opts_chunk:
class-output: hscroll
---
## Quarto
```{r}
library(gapminder)
df <- dplyr::bind_cols(gapminder, gapminder, .name_repair = "minimal")
head(df)
```
```{css, echo=FALSE}
.hscroll {
overflow-x: auto;
white-space: nowrap;
}
```
I am trying to display some regression results in an rmarkdown html file. However, the output from the code chunks is too narrow and therefore it is very hard to read the p-values, etc, particularly when I include a floating table of contents. I have tried adjusting options(width = 9999) but this does not seem to fix the issue. I have also tried:
<style>
pre {
overflow-x: auto;
}
pre code {
word-wrap: normal;
white-space: pre;
}
</style>
which allows me to scroll horizontally if needed. However, given I am using regression results, I do not like having to scroll back and forth to read the coefficients and p-values. I have also tried:
<style>
.main-container { width: 1200px; max-width:2800px;}
</style>
adjusting the width and max-width values, to no avail. These solutions are suggested here.
Any idea how I can solve this issue?
Here is an example. Unfortunately I cannot post my regression results, so here is a matrix that essentially replicates the same issue:
---
title: "Untitled"
author: "me"
date: "11/10/2021"
output:
html_document:
toc: true
tow_float: true
---
```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = TRUE)
options(width = 9999)
matrix = matrix(rnorm(100,5,2), ncol = 20)
matrix
However, when I knit the document, I get something like this:
How can I make the output wider?
I found out, where is your problem.
The floating toc is guilty.
Look, I took a code from that post and remove toc_float.
---
title: "R Notebook"
author: "me"
date: "11/10/2021"
output:
html_document:
toc: true
---
<style>
.main-container { width: 1800px; max-width:2800px;}
</style>
## R Markdown
```{r}
options(width = 1500)
dataM <- matrix(rnorm(100, 5, 2), ncol = 20)
dataM
```
And it works:
I think, that this space under toc is reserved. But can't say it with 100% confidence.
An addition
You should make a custom TOC with CSS.
I'm not a pro with CSS, so, I have compiled something for you. You can modify it...
CSS-file:
#TOC {
font-family: Arial, Helvetica, sans-serif;
color:black;
background-color: white;
position: fixed;
top: 0;
left: 0;
width: 150px;
border: 1px solid Black;
padding: 10px;
margin: 30px;
overflow:auto;
}
body {
max-width: 800px;
margin-left:210px;
line-height: 20px;
}
Your header:
---
title: "R Notebook"
author: "me"
date: "11/10/2021"
output:
html_document:
css: TOC.css
toc: true
---
I have a DT data table in my RMarkdown document that allows users to download to a csv. How can I shift this table to the left in my HTML file
in order to get the whole document to shift left, you can add inline CSS code in your Rmarkdown, like this
---
title: "DT table"
author: "Daniel"
date: "5/22/2021"
output: html_document
---
<style type="text/css">
.main-container {
max-width: 1800px;
margin-left: auto;
margin-right: auto;
}
</style>
```{r, message=FALSE, warning=FALSE}
library(DT)
datatable(iris)
```
Which renders in the web browser all the way to the left.
If you know more CSS than me, then you can control your document with Divs and CSS selectors to get a even more specific layout
I am trying to print a large table in Rmarkdown and for some reason the output is split up which makes it hard to read.
I would like to add an horizontal scrollbar so it doesn't split. I managed to do it for the vertical axis, but not for the horizontal one.
Here is a sample of code:
---
title: "Test"
output: html_document
---
```{css, echo=FALSE}
.main-container {
max-width: 800px !important;
}
pre {
max-height: 800px !important;
overflow-y: auto !important;
overflow-x: scroll !important;
}
```
```{r}
mdl <- lm(data = iris, Petal.Width ~ Sepal.Length*Sepal.Width*Petal.Length*Species)
summary(mdl)
```
This is how the output looks like:
As you can see, the horizontal scroll bar shows-up but the output is still split-up. I tried with both overflow-x: scroll !important; and max-width: 500px !important; without success.
The problem persists even if I set the .main-container CSS to max-width: 1200px !important; so that there should in principle be enough space for the model to print without splitting-up.
This is what I'm looking for:
Update
As suggested by #Rorschach, I have added the options(width = 160) to the script. This solves the issue in the second case, that is, when the .main-container CSS max-width is large enough (e.g. 800px):
However, if the max-width is not large enough (e.g. 600px) the print is still messed-up:
---
title: "Test"
output: html_document
---
```{css, echo=FALSE}
.main-container {
max-width: 600px !important;
}
pre {
max-height: 800px !important;
overflow-y: auto !important;
overflow-x: scroll !important;
}
```
```{r setup}
options(width = 160)
```
```{r}
mdl <- lm(data = iris, Petal.Width ~ Sepal.Length*Sepal.Width*Petal.Length*Species)
summary(mdl)
```
Not an css expert but the following seems to do the trick:
---
title: "Test"
output: html_document
---
```{css, echo=FALSE}
.main-container {
max-width: 600px !important;
}
pre {
max-height: 800px !important;
overflow-y: auto !important;
overflow-x: scroll !important;
}
pre code {
white-space: pre
}
```
```{r}
options(width=160)
mdl <- lm(data = iris, Petal.Width ~ Sepal.Length*Sepal.Width*Petal.Length*Species)
summary(mdl)
```
I am knitting an Rmd file in RStudio to HTML, and I'd like to increase the space between body text and tables/figures. Here's a nice solution for PDF output. What part of the CSS specifies this spacing in HTML output? I'm looking for a template-wide solution, not a manual <br>.
---
title: "Example"
output:
bookdown::html_document2:
fig_captions: yes
number_sections: false
theme: cerulean
highlight: tango
toc: true
code_download: true
code_folding: "show"
toc_float: true
---
<style type="text/css">
body{ /* Normal */
font-size: 18px;
font-family: Helvetica;
}
div#TOC li {
list-style:none;
background-image:none;
background-repeat:none;
background-position:0;
}
</style>
```{r setup, include=FALSE}
library(ggplot2)
library(knitr)
```
## Section
Here is some text before a table.
```{r cars}
kable(head(cars))
```
Here is some text after the table. Here comes a plot. Could use more space after the table and before the plot.
```{r pressure, echo=FALSE, fig.align="center", fig.cap="My caption", message=FALSE, warning=FALSE}
ggplot(cars, aes(speed)) +
geom_histogram()
```
Here is some text after the plot. Need some space between the figure caption and the body text.
Add
.figure {
margin-top: 100px;
margin-bottom: 100px;
}
table {
margin-top: 100px;
margin-bottom: 100px !important;
}
inside the <style> tag. Obviously adjust to the needed amount.