防止导航栏与Flexdboard R中的内容重叠 [英] Prevent navigation bar from overlapping content in flexdashboard R

问题描述

我正在R中构建一个具有多个页面(选项卡)的Flexdashboard。当我减小页面宽度时，导航栏将变为两行或更多行，并覆盖/覆盖主面板的内容。

如何修复导航栏，使其保持一行，而不考虑宽度调整？或者如何在导航栏和主面板之间添加填充以防止重叠？

我在下面附上了正确视图和有问题视图的图像。

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

编辑：以下是用于提供上述两个图像的弹性仪表板脚本。

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

推荐答案

我也遇到了同样的问题--只是使用Data-navMenu属性解决了(多少有点问题)。它将为您提供下拉菜单而不是选项卡，但它可以快速解决重叠问题。

尝试，例如

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

```

这篇关于防止导航栏与Flexdboard R中的内容重叠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！