I am working on a project using rMarkdown and the flexdashboard package from rStudio. Everything is coming together nicely. But I would like to remove the blue title bar you see at the top of the image here.
We are dropping this html page into a window so it becomes a second title bar, which looks terrible. Is there a function in flexdashboard to remove this entire apparatus?
Here is the YAML and the first chunk you see just below the blue bar in the photograph. Any suggestion would be greatly appreciated.
---
title: New Hampshire Statewide Age Adjusted Incedence Rates of Lyme
output:
flexdashboard::flex_dashboard:
orientation: rows
---
```{r setup, include=FALSE, message=FALSE, warning=FALSE, echo=TRUE}
```
Row
-----------------------------------------------------------------------
###
```{r, aarState, message=FALSE, warning=FALSE}
library(flexdashboard)
library(rbokeh)
#load state-wide age adjusted rates
aar<-read.csv("stateAAR.csv")
figure(title=" Age Adjusted Rates by Year",width= 1500, height =600) %>%
ly_segments(year, lci*100000, year, uci*100000, data=aar, color = "#b37700", width = 1) %>%
ly_points(year, adj.rate*100000, glyph = 21, size=6, data = aar, hover= "<strong>Rate per 100,000:</strong> #rateHundThou </br> <strong>Upper Confidence:</strong> #uciHT </br><strong> Lower Confidence:</strong> #lciHT " , color="#666622" )%>%
x_axis(label ='Year')%>%
y_axis(label ='Age Adjusted Rate')
```
Row
You can just add CSS styling directly to your markdown document (no JQuery required):
---
title: "Untitled"
output:
flexdashboard::flex_dashboard:
orientation: columns
vertical_layout: fill
---
<style>
body {
padding-top:0px
}
.navbar{
visibility: hidden
}
</style>
```{r setup, include=FALSE}
library(flexdashboard)
```
Column {data-width=650}
-----------------------------------------------------------------------
### Chart A
```{r}
hist(iris$Sepal.Length)
```
Column {data-width=350}
-----------------------------------------------------------------------
### Chart B
```{r}
hist(iris$Sepal.Width)
```
### Chart C
```{r}
hist(iris$Petal.Length)
```
Results in:
I am not aware of any flexdashboard option. But you could use jQuery to remove the navbar and move the body up. Just include the following snippet right after your YAML:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('.navbar').remove();
$('body').css('padding-top', '0px');
});
</script>
I think this leaves the main navigation bar of the parent document untouched. If not it might need some lsight modification.
Related
I have the following dashboard:
---
title: "Untitled"
output:
flexdashboard::flex_dashboard:
orientation: columns
vertical_layout: fill
---
```{r setup, include=FALSE}
library(flexdashboard)
library(gt)
library(dplyr)
library(tidyr)
Tab 1
=======================================================================
Column
-----------------------------------------------------------------------
### Chart A
```{r}
mtcars %>%
gt()
But I can't see all the table generated by gt because I can't scroll it. So I tried to add a css style chunk:
.chart-stage {
overflow: auto;
}
But I can achieve what I want, which is to add a scroll bar to see all the table. Please, any help will be greatly appreciated.
After reviewing the css selectors, this is the solution for the question, you'll have to add this chunk to allow scrolling:
```{css}
.chart-shim {
overflow: auto;
}
```
I had the same problem, tried many things and ultimately found this solution using the htmltools package
---
title: "Untitled"
output:
flexdashboard::flex_dashboard:
orientation: columns
vertical_layout: fill
---
```{r setup, include=FALSE}
library(flexdashboard)
library(gt)
library(dplyr)
library(tidyr)
require(htmltools)
```
Tab 1
=======================================================================
Column
-----------------------------------------------------------------------
### Chart A
```{r}
div(style='height:800px; overflow-y: scroll', gt(mtcars))
```
I'm using the tufte R package to create an html document with margin notes. Some of my margin notes are figures that are fairly tall. For example:
---
title: Big sidenote
output:
tufte::tufte_html: default
---
```{r setup, include=FALSE}
library(tufte)
# invalidate cache when the tufte version changes
knitr::opts_chunk$set(tidy = FALSE, cache.extra = packageVersion('tufte'))
options(htmltools.dir.version = FALSE)
```
```{r fig.margin = TRUE, fig.cap="Fig1. My margin figure is kind of tall.", echo=FALSE}
plot(mtcars)
```
Here is paragraph 1. It's pretty short and it's associated with Fig 1.
```{r fig.margin = TRUE, fig.cap="Fig 2. Related to the second paragraph.", echo=FALSE}
plot(subset(mtcars, cyl==6))
```
I'd like this paragraph to start in line with Fig 2.
```
I would like the paragraph in the main body to begin below the bottom of the figure in the margin.
Is this possible within the markdown? My CSS skills/understanding are limited.
I figured this out. Simple for those who know CSS well, but here for those who don't. The margin notes are created with a float property. You can use the float property to disallow floating elements to the side of your text.
I created a new "cleared" class that clears elements to the right:
<style>
.cleared {clear: right;}
</style>
Then, whenever I wanted text to skip down to the next figure, I created a div of the cleared class:
<div class = "cleared"></div>
Here is the full example:
---
title: Big sidenote
output:
tufte::tufte_html: default
---
<style>
.cleared {clear: right;}
</style>
```{r setup, include=FALSE}
library(tufte)
# invalidate cache when the tufte version changes
knitr::opts_chunk$set(tidy = FALSE, cache.extra = packageVersion('tufte'))
options(htmltools.dir.version = FALSE)
```
```{r fig.margin = TRUE, fig.cap="Fig1. My margin figure is kind of tall.", echo=FALSE}
plot(mtcars)
```
Here is paragraph 1. It's pretty short and it's associated with Fig 1.
<div class = "cleared"></div>
```{r fig.margin = TRUE, fig.cap="Fig 2. Related to the second paragraph.", echo=FALSE}
plot(subset(mtcars, cyl==6))
```
I'd like this paragraph to start in line with Fig 2.
And the result:
In this example xaringan presentation, why are both the ## blank page and the leaflet map on the same slide, given I've separated them by the new-slide separator --- ?
---
title: "map test"
output:
xaringan::moon_reader:
css: ["default"]
nature:
highlightLines: true
---
```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = TRUE)
```
## blank page
content
---
leaflet page
```{r}
library(leaflet)
leaflet() %>%
addTiles()
```
---
Looks like you've got an unintended space after the new slide separator after blank content as "--- ". Remove that space and it'll be recognized as real slide separator:
---
title: "map test"
output:
xaringan::moon_reader:
css: ["default"]
nature:
highlightLines: true
---
```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = TRUE)
```
## blank page
content
---
leaflet page
```{r}
library(leaflet)
leaflet() %>%
addTiles()
```
---
In my case I'm adding mathjax/latex equations and I had:
$$
\begin{aligned} P(Y= k)=\comb{k-1}{r-1} * p^r q^{k-r}, \qquad k= r,r+1
\end{aligned}\label{pascal}\tag{5}
$$
And I had to remove the breaklines
$$\begin{aligned} P(Y= k)=\comb{k-1}{r-1} * p^r q^{k-r}, \qquad k= r,r+1
\end{aligned}\label{pascal}\tag{5}$$
and then it worked. I've that it renders mathjax better if all the code is in a single line.
I have a flexdashboard and there is an action button that does this:
actionButton(inputId="submit",
label = "Submit answers",
class="btn btn-success",
onClick="location.href='#section-your-results';")
then an observer that does this:
observeEvent(input$submit,{
some calculation
})
The problem is that the onClick part is executed before the observeEvent is triggered. So the calculation doesn't apply to the section I'm jumping to.
What i want to do is this:
actionButton(inputId="submit",
label = "Submit answers",
class="btn btn-success")
and then have an observer that does this:
observeEvent(input$submit,{
some calculation
useShinyjs()
runjs("location.href='#section-your-results';")
}))
But for some reason the runjs command isn't being executed (I also tried replacing the location.href with an alert to confirm. Any idea on what is going wrong? I have seen this answer and tried that approach as well with no luck.
Here is (for me) a reproducible example - I expect an alert box to pop up when I click submit, but it doesn't for me
---
title: "reprex shinyjs rmd"
output:
flexdashboard::flex_dashboard:
orientation: rows
vertical_layout: scroll
runtime: shiny
---
```{r setup, include=FALSE}
library(flexdashboard)
library(shinyjs)
useShinyjs(rmd = TRUE)
```
Column {data-width=650}
-----------------------------------------------------------------------
### Chart A
```{r}
onclick("submit",runjs('alert("Hello! I am an alert box!!");'))
```
### Chart B
```{r}
actionButton(inputId="submit",
label = "Submit answers",
class="btn btn-success")
```
So to get this to work I had to do two things:
Switch the location of the useShinyjs() to a non-setup chunk.
Change the onClick to an onEvent and watch for the event of the input being clicked.
I think that this is because the shiny input element disables to default click event for a button and thus shinyjs is watching for something that never happens.
Here's the reproducable example that works.
---
title: "reprex shinyjs rmd"
output:
flexdashboard::flex_dashboard:
orientation: rows
vertical_layout: scroll
runtime: shiny
---
```{r setup, include=FALSE}
library(flexdashboard)
library(shinyjs)
```
Column {data-width=650}
-----------------------------------------------------------------------
```{r}
useShinyjs(rmd = TRUE)
actionButton(inputId="submit",
label = "Submit answers",
class="btn btn-success")
```
```{r}
observeEvent(input$submit, {
runjs('alert("Hello! I am an alert box!!");')
})
```
I created a flexdashboard document that has multiple pages. I would like that on the first page the vetical_layout: fill but on the second page I would like that vertical_layout: scroll. My document starts like this:
---
title: "DASHBOARD"
output:
flexdashboard::flex_dashboard:
orientation: columns
logo: logo.png
vertical_layout: fill
---
How can I see the second page with the vertical_layout: scroll?
You can override the global vertical_layout value on an individual (H2) column.
---
title: "Changing Vertical Layout"
output:
flexdashboard::flex_dashboard:
orientation: columns
vertical_layout: fill
---
```{r setup, include=FALSE}
library(flexdashboard)
library(ggplot2)
```
Page 1
================================
Column {data-width=650}
-----------------------------------------------------------------------
### Panel A
```{r}
qplot(cars$speed)
qplot(cars$dist)
```
Column {data-width=350}
-----------------------------------------------------------------------
### Panel B
```{r}
qplot(cars$speed)
```
### Panel C
```{r}
qplot(cars$dist)
```
Page 2
================================
Column { vertical_layout: scroll}
-----------------------------------------------------------------------
### Panel A
```{r}
qplot(cars$speed)
qplot(cars$dist)
```
```{r}
qplot(cars$speed)
qplot(cars$dist)
```
```{r}
qplot(cars$speed)
qplot(cars$dist)
```
Here's a similar example of overriding the global values. (But in this case, they're changing the orientation at the page (H1) level).
The following solution worked for me. In the YAML header, I use "vertical_layout: fill" to set the default behavior to "fill." I then use the below CSS styling in the Page header and Column header for the page that needs to scroll.
Page 3 {style="position:relative;"}
========================================================
Column {style="height:100pc;"}
--------------------------------------------------------
### Chart A
``` {r}
```
### Chart B
``` {r}
```