5

Im trying to figure out how to combine a grid layout, rowwise tabset and the ability to scroll in markdown / flexdashboard.

enter image description here

What I would like to achieve is that Tab 3 should be to the right of Tab 1 & 2 with the ability to scroll down to Tab 4-6 (where Tab 6 should be to the right of 4/5). Something like this:

enter image description here

Is this possible? 

---
title: "Test"
output: 
  flexdashboard::flex_dashboard:
    orientation: row
    vertical_layout: scroll

---

```{r setup, include=FALSE}
library(flexdashboard)
```


A {data-orientation=rows}
===================================================

Row {data-width=500 data-height=400 .tabset}
-----------------------------------------------------------------------

### Tab 1 {data-height=400 data-width=500}

```{r}
plot(rnorm(10))
```

### Tab 2 {data-height=400 data-width=500}

```{r}
plot(rnorm(10))
```

Column 
-----------------------------------------------------------------------

### Tab 3 {data-height=400 data-width=300}
Some text


Row {data-width=500 data-height=400 .tabset}
-----------------------------------------------------------------------

### Tab 4 {data-height=400 data-width=500}

```{r}
plot(rnorm(10))
```

### Tab 5 {data-height=400 data-width=500}

```{r}
plot(rnorm(10))
```


Column 
-----------------------------------------------------------------------

### Tab 6 {data-height=400 data-width=300}

Some text
Pierre
  • 671
  • 8
  • 25
  • 1
    It seems like you currently can't mix row and column layouts. [Related SO question](https://stackoverflow.com/questions/36451484/how-to-combine-row-and-column-layout-in-flexdashboard), [Statement by J.J.Allaire](https://github.com/rstudio/flexdashboard/issues/37) – GyD Feb 09 '18 at 19:21

1 Answers1

4

Here is a possible solution to your problem

enter image description here

This is the code

---
title: "Test"
output: flexdashboard::flex_dashboard
---

```{r setup, include=FALSE}
library(flexdashboard)
require(shinydashboard)
require(shiny)
require(plotly)
```


A {data-orientation=rows}
===================================================

Row
-----------------------------------------------------------------------

```{r}
p1 <- plot_ly(x = 1:10, y = rnorm(10))
tabBox(width=5,tabPanel("Tab1", p1), tabPanel("Tab2"), height = "450px")
```

```{r}
tabBox(width=7, tabPanel("Tab3","Some text"), height = "450px")
```

Row
-----------------------------------------------------------------------

```{r}
p2 <- plot_ly(x = 1:10, y = rnorm(10))
tabBox(width=5, tabPanel("Tab4",p2), tabPanel("Tab5"), height = "450px")
```

```{r}
tabBox(width=7, id = "tabset4", tabPanel("Tab6","Some text"), height = "450px")
```
Rafael Díaz
  • 2,134
  • 2
  • 16
  • 32
  • While your solution works well, plotly plots are aliged in the top-left corner of the larger tabpanels (width 7). How can I center them? – Rob G. Oct 31 '21 at 07:08