Prevent navigation bar from overlapping content in flexdashboard R

Question

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

Overlap when I reduce width: navigation bar covers main panel and container title "Chart B" is now covered

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
============================================================

You should provide code in the form of a [reproducible example](http://stackoverflow.com/questions/5963269/how-to-make-a-great-r-reproducible-example). That will make it much easier to help you. — MrFlick, Mar 20 '17 at 22:21

score 4 · Accepted Answer · answered Apr 12 '17 at 15:59

4

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}

```

answered Apr 12 '17 at 15:59

Joy

769
6
24

1

That's a nice workaround. Thank you for the suggestion! – Sujin May 25 '17 at 04:20
Glad it helped! – Joy May 25 '17 at 18:27
how to add right border (thick and black) to each nav menu items to look like something like this: `Menu Item 1 |` – LeMarque Jan 01 '23 at 08:03

score 0 · Answer 2 · answered Apr 25 '20 at 14:53

0

You can also try adding a space using html between the column code and its content:

Nice looking data
================================

Column{data-width=700}
-----------------------------------------------------------------------

<br>

answered Apr 25 '20 at 14:53

Luis

61
4
9

Prevent navigation bar from overlapping content in flexdashboard R

2 Answers2

Linked

Related