CODEWITHSUNDEEP
rr-markdownflexdashboard
Pierre
Pierre

Reputation: 741

R markdown - flexdashboard - grid layout & scroll & tabset

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

Upvotes: 5

Views: 5662

Answers (1)

Rafael Díaz
Rafael Díaz

Reputation: 2289

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")
```

Upvotes: 4

Related Questions