I am making a Flexdashboard that is column orientated and contains four value boxes along with graphs and tables. The value boxes had a certain height before but I have recently changed the information in one of the value boxes and now the height of all boxes is larger. Here is how the code looks for the four value boxes
vb1<-valueBox(Parkvorgaenge_Insgesamt,"Parkvorgänge Insgesamt", icon = "fa-car", color = "warning")
vb2<-valueBox(Parkstunden_Insgesamt,"Parkstunden Insgesamt", icon = "fa-hourglass-end", color = "warning")
vb3<-valueBox(Einnahmen_Insgesamt,"Einnahmen Insgesamt", icon = "fa-eur", color = "warning")
vb4<-valueBox(Durchschnittliche_Parkdauer,"Durchschnittliche Parkdauer", icon = "fa-clock", color = "warning")
Column {data-width=350}
-----------------------------------------------------------------------
###
``{r}
renderValueBox(vb1)
``
###
``{r}
renderValueBox(vb2)
``
###
``{r}
renderValueBox(vb3)
``
###
``{r}
renderValueBox(vb4)
``
I have tried adding {data-height = some number} by each of the three hashtags (like this ### {data-height = some number}) but this did nothing to change the height. I have looked online but there is nothing directly answering this.
In short, how do you control the height of the value boxes in Flexdashboard?
You could change the height of the value boxes with css:
---
title: "Tabset Column"
output:
flexdashboard::flex_dashboard
runtime: shiny
---
```{css}
.value-box {
height: 200px;
}
```
```{r global, echo = FALSE}
library(shiny)
library(flexdashboard)
vb1<-valueBox(2000,"Parkvorgänge Insgesamt", icon = "fa-car", color = "warning")
vb2<-valueBox(541515,"Parkstunden Insgesamt", icon = "fa-hourglass-end", color = "warning")
vb3<-valueBox(30000,"Einnahmen Insgesamt", icon = "fa-eur", color = "warning")
vb4<-valueBox(5.4,"Durchschnittliche Parkdauer", icon = "fa-clock", color = "warning")
```
Column
-----------------------------------------------------------------------
###
```{r}
renderValueBox(vb1)
```
###
```{r}
renderValueBox(vb2)
```
###
```{r}
renderValueBox(vb3)
```
###
```{r}
renderValueBox(vb4)
```
Alternatively you can put the css in a separate file. In the example below it is called styles.css and it is placed in the same folder as the app.
.value-box {
height: 200px;
}
This would be the app itself:
---
title: "Tabset Column"
output:
flexdashboard::flex_dashboard:
css: styles.css
runtime: shiny
---
```{r global, echo = FALSE}
library(shiny)
library(flexdashboard)
vb1<-valueBox(2000,"Parkvorgänge Insgesamt", icon = "fa-car", color = "warning")
vb2<-valueBox(541515,"Parkstunden Insgesamt", icon = "fa-hourglass-end", color = "warning")
vb3<-valueBox(30000,"Einnahmen Insgesamt", icon = "fa-eur", color = "warning")
vb4<-valueBox(5.4,"Durchschnittliche Parkdauer", icon = "fa-clock", color = "warning")
```
Column
-----------------------------------------------------------------------
###
```{r}
renderValueBox(vb1)
```
###
```{r}
renderValueBox(vb2)
```
###
```{r}
renderValueBox(vb3)
```
###
```{r}
renderValueBox(vb4)
```