防止导航栏在flexdashboard R中重叠内容

时间:2017-03-20 22:13:00

标签: r shiny flexdashboard

我在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

编辑:这是用于提供上述两个图像的flexdashboard脚本。

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

2 个答案:

答案 0 :(得分:1)

我遇到了同样的问题 - 通过使用data-navmenu属性解决了它(sorta)。它会为您提供一个下拉菜单而不是标签,但它可以快速解决重叠问题。

尝试,例如

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

```


答案 1 :(得分:0)

您也可以尝试在列代码及其内容之间使用html添加空格:

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

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

<br>