rstudio
Align multiple valueboxes/gauges counter to overall orientation
At the moment, because the overall orientation is either columns or rows, it is currently impossible to align multiple valueboxes or gauges next to each other in column layout or above each other in row layout. Simple layouts can usually be translated, but even mildly complicated layouts are impossible:
---
title: "Untitled"
output:
flexdashboard::flex_dashboard:
orientation: columns
vertical_layout: fill
---
```{r setup, include=FALSE}
library(flexdashboard)
```
Left column {.sidebar data-width=300}
----------------------------------------------------------------------
### Left sidebar
```{r}
mtcars[, 1:2]
```
Center column
-----------------------------------------------------------------------
### Box 1
```{r}
valueBox('left please')
```
### Box 2
```{r}
valueBox('right please')
```
### Center chart
```{r}
plot(1)
```
Right column {data-width=300}
----------------
### Right column
```{r}
mtcars[, 1:2]
```
which of course renders the valueboxes above each other, which looks silly if they're in the main column. It seems like adding a data-width parameter to the h3 header of each or setting the fig.width/fig.align chunk options should flow them together as screen width allows, but it doesn't.
Thus, is it possible to add
- the option to set individual flexbox widths (as a percentage of the current column, perhaps), or
- the ability to use rows within columns and vice versa, or
- a way to render mulitple valueboxes and gauges from within one code chunk?
This is related to the limitation of tabsets, which can't contain more than a single figure, and are thus useless for valueboxes and gauges. Maybe it's time to break into h4 headers.
Yes, the answer is definitely to allow h4 headers. This will solve many problems including more complex layouts and more flexible uses of tabsets. We're not planning on making this change in the short term, but it's clearly the next big step for the package.
By the use of display: table-cell; combined with a reduction of the width like width: 20% !important; on the ID of your values box/gauges, it puts them on a single row.
@tvroylandt Could you please post a reprex of how you got it to work?
The other thing about valueboxes is that I think it needs to be clarified that the caption input is ignored, but instead, it inherits the ### h3 level's title.
