I'm trying to set up a flexdashboard to convey some information and am having some problems with scrolling. Putting vertical_layout: scroll in the header does no good, it leads to the flexdashboard cutting off halfway down the page. When I set vertical_layout fill, I can see more info, but it still goes off the page. In neither case is a vertical (or horizontal) scrollbar available to enable the user to see the cut-off information.
Although I have more text than below, this is illustrative of the problem. Does anyone know why this may be happening or if there might be any ways around it? I'm using a tablet currently but have tried using standard columns with no success. The problem is on Page 2. Thanks.
---
title: "title"
output:
flexdashboard::flex_dashboard:
orientation: columns
vertical_layout: scroll
---
Introduction
===
Column
---
* some text
Page 2
===
Column {.tabset}
---
### h3
* test
#### h4
* text
#### h4
* text
### h3
#### h4
* some text
#### h4
* some text
Related
I want to include some text above the graphics in the main area of a frame in Flexdashboard storyboard. Here's the minimal example.
---
title: "Title"
output:
flexdashboard::flex_dashboard:
orientation: rows
vertical_layout: fill
horizontal_layout: scroll
runtime: shiny
---
Storyboard name {.storyboard}
=====================================================================
### Storyboard frame 1
```{r}
renderPlot({
plot(rnorm(1e3))
})
```
>Footnote
***
Data commentary text.
When I add the text just above and outside the R chunk, the graph gets truncated at the bottom.
The graph needs to be inside renderPlot() to include interactive elements. It appears the problem is because the height parameter of renderPlot() is "auto", which automatically sets the height of the graphic to the height of the whole frame, and since the text is included, the height that it sets means the graph doesn't fit the area less the text and gets truncated. I found by experimenting the height can be set to a fixed size in pixels. I can set the height in pixels by trial-and-error that would look OK on my screen, but unfortunately it doesn't fully solve the problem, because users who open the app in a different screen resolution would get a messed up layout.
Personally speaking, fixing the height is not a big issue, fixing the width is the bigger problem for users with different screens. Both overflow height and width can be converted to a scrollable page, but it is always comfortable to scroll the document vertically but not horizontally, and this is what most websites are doing. Anyhow, if you don't want to fix the height of the plot with px, the easiest way is to add a scroll bar to the left column so users can scroll and see the hidden content:
Add this chunk and you are all set.
```{css}
.chart-wrapper .chart-stage {
overflow-y: auto;
}
```
I have a flexdasboard with a page that contains 1 plot then below it a table. The table currently is compressed, so whilst it shows 25 rows it has them all within a scroll option so you can only view 2 of those rows at a time. How can I change this?
I am currently coding this with:
---
title: "Plots and tables"
output:
flexdashboard::flex_dashboard:
orientation: rows
vertical_layout: scroll
---
{r setup, include=FALSE}
library(flexdashboard)
library(ggplot2)
library(dplyr)
library(tidyverse)
library(data.table)
library(plotly)
library(htmlwidgets)
library(DT)
Page 1 {style="position:relative;"}
================================
{r fig.width=14, fig.height=10}
plotlyp1 <- ggplotly(p1)
plotlyp1
Row {style="height:100pc;"}
--------------------------------------------------------
### {data-height=10000}
{r}
DT::datatable(one.data_bp,
rownames = FALSE, options = list(pageLength = 25, lengthMenu = c(5, 10, 15, 20)), filter = 'top', height=10000
)
I've removed the back ticks so everything is visible as code. The table this outputs looks like this:
So this has the 25 rows like I code for, but they are condensed and need scrolling with only 1 or 2 rows immediately visible at a time, how do I change the height of the table so at least 5/25 of the rows are visible?
Edit: I've technically fixed it and increased the number of rows visible by changing the Row setting to:
Row {.tabset .tabset-fade}
--------------------------------------------------------
Luckily I don't mind the table looking like it's in a tab, but I feel like this isn't the best or most direct fix, is there anything I can do?
An answer to this had been posted in another forum: https://community.rstudio.com/t/dt-datatable-output-too-small-in-rmarkdown-flesxdashboard/124243/3. The datatable will be height-adjusted based on the available space. The following code has to be pasted after the YAML header (so the approach is similar to nap's answer).
<style>
.dataTables_scrollBody {
max-height: 100% !important;
}
</style>
I had the same problem as you, but only on one PC, not on another. Maybe something about the version of a package, but this code helped.
Had the same issue and I wasn't able to find an rmarkdown option or a DT option to fix this, but this worked for me - I put this CSS style to my rmarkdown:
<style>
.dataTables_scrollBody {
height:400px !important;
max-height:400px !important;
}
.chart-stage-flex {
overflow:auto !important;
}
</style>
Both height and max-height need to be there, but I don't believe they need to match. You can try different arguments for each, but for me, 100% created a container that was too large and didn't scroll. And there are other height arguments you may wish to try: https://developer.mozilla.org/en-US/docs/Web/CSS/height.
Since I used a fixed height, I added overflow:auto style to .chart-stage-flex so that a scroll bar would appear when the window is smaller than 400px.
I'd love to hear if anyone knows how to control this from DT or knitr, etc.
---
title: "How do you top align this figure below?"
output: flexdashboard::flex_dashboard
---
```{r c1, fig.width=9}
plot(mtcars)
```
The R flexdashboard code above generates a plot that is centered vertically when I maximize my dashboard window. It looks like this.
Instead, I want the image to be vertically top aligned, with no white space above the image. It would look like the image below, with any spare white space placed below the image (should your window be maximized). If your output doesn't quite match mine just resize your output window to be tall and thin (think of rotated "coding" monitors).
The R Markdown argument fig.align only has horizontal options (left, right, center) and the flexdashboard argument .no-padding doesn't seem to help.
How do I get flexdashboard to top align within R Markdown?
You could use css to override the background position of the image.
---
title: "Flex"
author: ""
output:
flexdashboard::flex_dashboard:
orientation: rows
css: styles.css
---
Page One
=======================================================================
Row
-----------------------------------------------------------------------
### chart1
```{r, fig.width=12}
plot(mtcars)
```
styles.css (in same working directory):
.image-container {
background-position: center top !important;
}
I'm working with R Markdown in a dashboard containing several tabs. In some of those tabs I want to display only an image with a link to a webpage. I managed to do this with this code:
---
title: "MyDashboard"
output:
flexdashboard::flex_dashboard:
orientation: rows
vertical_layout: fill
logo: Logo.png
favicon: Favicon.png
---
```{r setup, include=FALSE}
library(flexdashboard)
```
Row {data-height=350}
-------------------------------------
### THIS TAB CONTAINS NORMAL CONTENT
```{r}
plot(example)
```
Row {data-height=650}
-------------------------------------
### THIS TAB CONTAINS AN IMAGE WITH LINK
```{r}
```
[<img src="image.png" style="width:100%; height=100%">](https://webpage.com/)
This displays the image with the link as expected, but when knitted, the image doesn't adjust to the tab's size and depending on the browser I use, vertical and horizontal scrollbars appear.
I would need to fit the image inside the limits of the tab in every browser I use, but all I tried until now failed.
Any help would be appreciated.
I am using RMarkdown to create an ioslide presentation with shiny.
Some of my slides do not actually fit on one page and are truncated.
Since this is a HTML output, I would like to add a scroll bar to make my long slides scrollable.
I have been googling a lot and found a partial solution to make R code chunks scrollable. However I want to make my slides scrollable regardless of the content.
This is a toy Rmd example giving slides not fitting on one page:
---
title: "Untitled"
date: "30 October 2018"
output: ioslides_presentation
runtime: shiny
---
```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = FALSE)
```
## Shiny Presentation
- A very long
- and boring
- list of
- bullet points
- just a
- toy example
- obviously
- not over yet
- almost
- not quite
- finally
- out of frame!
I would like to make this slide scrollable since it does not fit on one page.
Edit: I am not sure why this is being heavily downvoted - would appreciate a constructive comment :) In the meantime, I did remove the css tag which may have brought people not familiar with rmarkdown.
Self-answer:
The bit of CSS that will make the slide scrollable (both horizontally and vertically but you just have to remove one line if only vertical scrolling is needed) is:
slides > slide {
overflow-x: auto !important;
overflow-y: auto !important;
}
Note that the slide gets a height from ioslide so there is no need to specify a height (and in fact it seems to introduce visual glitches if you do). Using auto instead of scroll makes sure a scrollbar only appears when there is a need.
You can either add this CSS directly in the Rmd in between <style> tags or put the CSS in a separate file (e.g. scrollable_slides.css).
The CSS file can then be added to the Rmd like this (assuming scrollable_slides.css is in the same directory as the Rmd):
---
title: "..."
output:
ioslides_presentation:
css: 'scrollable_slides.css'
runtime: shiny
---