I'm building a flexdashboard in R with multiple pages (tabs). The navigation bar becomes two or more rows and overlaps/covers the content of the main panel when I reduce the width of the page.
How do I fix the navigation bar so that it remains one row regardless of width adjustment? Or how do I add padding between the navigation bar and main panel to prevent overlap?
I have attached images of the correct view and problematic view below.
What I want regardless of width adjustment: No overlap, container title "Chart B" is still visible
Edit: Here is the flexdashboard script used to provide the two images above.
---
title: "Untitled"
output:
flexdashboard::flex_dashboard:
orientation: columns
vertical_layout: fill
---
```{r setup, include=FALSE}
library(flexdashboard)
```
Long Tab 1
============================================================
### Chart A
```{r}
```
Another Long Tab 2
============================================================
Column {data-width=350}
-----------------------------------------------------------------------
### Chart B
```{r}
```
Another Long Tab 3
============================================================
### Chart C
```{r}
```
Another Long Tab 4
============================================================
Another Long Tab 5
============================================================
Another Long Tab 6
============================================================
I had the same problem -- just solved it (sorta) by using the data-navmenu attribute. It'll give you a drop-down menu instead of tabs, but it is a quick fix to the overlap problem.
Try, e.g.
---
title: "Untitled"
output:
flexdashboard::flex_dashboard:
orientation: columns
vertical_layout: fill
---
```{r setup, include=FALSE}
library(flexdashboard)
```
Long Tab 1 {data-navmenu="Project Sections"}
============================================================
### Chart A
```{r}
```
Another Long Tab 2 {data-navmenu="Project Sections"}
============================================================
Column {data-width=350}
-----------------------------------------------------------------------
### Chart B
```{r}
```