r - Rmarkdown flexdashboard valueboxes 在 Chrome 或 IE 中无法正确呈现(但在 FireFox 中有效)
问题描述
我的 flexdashboard 在 Firefox 中完美运行,但在 chrome 或 IE 中,值框无法正确呈现,它们隐藏在其他页面元素后面。我已经在其他几个网站上发布了这个但无法得到答案(对不起这个额外的句子,我收到一个错误,说我没有提供足够的细节,我不知道还有什么添加)。
这是我的代码的一个代表(以及一个pastebin,以防它不能很好地工作https://pastebin.pl/view/1d1503f4):
---
title: "reprex"
runtime: shiny
output:
flexdashboard::flex_dashboard:
theme: yeti
orientation: rows
vertical_layout: scroll
social: menu
source: embed
---
<script>
$('.navbar-logo').wrap('<a href="http://www.website.com" target=blank>');
</script>
```{r setup, include=FALSE}
library(flexdashboard)
library(knitr) # for RMarkdown to HTML
library(rmarkdown) # to generate Rmd final document
library(shiny) # dashboard interactivity
```
Sidebar {.sidebar}
======================================================================
some text for the sidebar
some more text
Section 1
======================================================================
## Row 1 {data-height=9}
-------------------------------
### valuebox1
```{r}
valueBox("986070", icon = "fa-user-times")
```
### valuebox2
```{r}
valueBox("8619681", icon = "fa-user-times")
```
## Row {data-height=800 .tabset .tabset-fade}
----------------------------------------------------------------------
### some other stuff
```{r}
# generate leaflet object, define basemap
leaflet(height = 400) %>% addProviderTiles("CartoDB.Positron", group = "CartoDB (Default)") %>%
addProviderTiles("Esri.WorldStreetMap", group = "Esri") %>%
addProviderTiles("CartoDB.DarkMatter", group = "CartoDB Dark") %>%
addLayersControl(
baseGroups = c("CartoDB (Default)", "Esri", "CartoDB Dark"),
options = layersControlOptions(collapsed = FALSE))
absolutePanel(
draggable = FALSE, top = "2%", left = "5%", right = "auto", bottom = "auto",
width = '30%', height = 'auto',
style = "background: white; border:3px solid #eaf2f8; color: #5d6063; justify-content: center;",
p(strong("some text"))
)
```
random text
在 Firefox(顶部)和 Chrome/IE(底部)中显示:
解决方案
我可以通过data-height=50
从包含值框的行中删除来解决这个问题。对于将来遇到此错误的任何人。Chrome 显然对 CSS/HTML 的解释与 Firefox 不同。如果有人可以提供有关为什么会发生的输入,我很想知道。
推荐阅读
- c# - What would be the best option to display class properties in a Microsoft.Toolkit.Uwp.UI.Controls.DataGrid?
- android - 在 Google Play 商店发布后,新创建的应用程序无法运行
- javascript - JavaScript 以一种聪明的方式创建带有子数组的对象/数组/在 JavaScript 中复制 PHP 数据结构
- python - left 删除字符串中第二个数字之前的任何内容
- r - 在折线图的特定位置添加点或点,并使用 ggplotly() 相应地调整工具提示
- docker - Docker 容器中的 Headless Cypress 分辨率始终为 1280x1024
- linux - 在 bash 脚本中添加请求的参数作为变量
- python - 安装 Jupyter Notebooks - Python 3.9 - Windows 10 的问题
- vba - 如何恢复 VBA Visual Basic 密码
- javascript - 如何使用 chrome.cookies.set() 在 Chrome 扩展程序中设置一组以前保存的 cookie?