防止导航栏与 flexdashboard R 中的内容重叠
Prevent navigation bar from overlapping content in flexdashboard R
我正在用 R 构建一个包含多个页面(选项卡)的 flexdashboard。当我减小页面宽度时,导航栏变成两行或更多行,overlaps/covers 主面板的内容。
如何修复导航栏,使其无论宽度调整如何都保持一行?或者如何在导航栏和主面板之间添加填充以防止重叠?
我在下面附上了正确视图和有问题视图的图像。
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
============================================================
我遇到了同样的问题——只是通过使用 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}
```
您也可以尝试在列代码及其内容之间使用 html 添加 space:
Nice looking data
================================
Column{data-width=700}
-----------------------------------------------------------------------
<br>
我正在用 R 构建一个包含多个页面(选项卡)的 flexdashboard。当我减小页面宽度时,导航栏变成两行或更多行,overlaps/covers 主面板的内容。
如何修复导航栏,使其无论宽度调整如何都保持一行?或者如何在导航栏和主面板之间添加填充以防止重叠?
我在下面附上了正确视图和有问题视图的图像。
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
============================================================
我遇到了同样的问题——只是通过使用 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} ```
您也可以尝试在列代码及其内容之间使用 html 添加 space:
Nice looking data
================================
Column{data-width=700}
-----------------------------------------------------------------------
<br>