在 Shiny 应用程序中包含降价表似乎破坏了 CSS [英] Including markdown tables in Shiny app seems to break CSS
问题描述
我正在尝试将在 Rmarkdown 中创建的表格包含在 Shiny 应用程序的选项卡中.出于某种原因，虽然 Markdown 在编织成 HTML 并单独查看时看起来很好，但当它作为 Markdown 或 HTML 插入到 Shiny 中时，表格 CSS 不起作用.
I'm trying to include a table created in Rmarkdown in a tab of a Shiny app. For some reason, although the markdown looks just fine when knitted to HTML and viewed on its own, the table CSS doesn't work when it's inserted into Shiny as markdown or HTML.
它应该如何/它自己看起来如何(即当下面的 testdoc.md 被预览为 HTML 时，或者当 testdoc.Rmd 被编织为 HTML 时):
How it should look/how it looks on its own (ie when testdoc.md below is previewed as HTML, or when testdoc.Rmd is knitted to HTML):
它在 Shiny 中的外观，首先使用 shiny::includeMarkdown，然后使用 shiny::includeHTML
How it looks in Shiny, first using shiny::includeMarkdown, second using shiny::includeHTML
您可以看到，在 Shiny 应用程序中，CSS 在第一个表中损坏，在第二个表中有些损坏(对齐错误).我强烈希望使用 includeMarkdown 而不是 includeHTML，因为由于某种原因 includeHTML 会导致我的应用程序中出现其他问题，包括以某种方式阻止 Javascript允许滑块和选择框工作并取消我的标签自定义 CSS.
You can see that, in the Shiny app, the CSS is broken in the first table and somewhat broken in the second (bad alignment). I would strongly prefer to use includeMarkdown instead of includeHTML, because for some reason includeHTML causes other problems in my app, including somehow preventing the Javascript that allows sliders and select boxes to work and cancelling out my custom CSS for tabs.
您可能会问:您为什么要使用 Markdown?为什么不使用 renderTable 在闪亮的表格中包含一个表格?嗯，这个特定的选项卡是一个文档选项卡，包含大量文本和多个表格，并且是很久以前为不同目的而创建的.还有其他的 Markdown 文档最终将被包含在内.如果能够将它们插入到 Shiny 应用程序中，而无需重新创建或拆分它们以允许使用 Shiny 表，那就太好了.
You may ask: why are you using markdown at all? Why not just include a table in shiny using renderTable? Well, this particular tab is a documentation tab, with lots of text and multiple tables, and was created long ago for different purposes. There are also other markdown docs that will eventually be included. It would be nice to be able to insert them into the Shiny app without having to recreate them or split them up to allow for Shiny tables.
这可能很容易解决，我对 CSS 了解不多.
This may be an easy fix, I don't know much about CSS.
下面的 MRE.
app.R:
library(shiny)
server <- function(input,output){
}
ui <- fluidPage(titlePanel("Test page"),
includeMarkdown("testdoc.md"),
includeHTML("testdoc.html")
)
shinyApp(ui=ui,server=server)
testdoc.Rmd:
testdoc.Rmd:
Test:
```{r table1, echo=FALSE}
table1 <- matrix(c(-1,0,1,.391,.144,.059,.720,.425,.230,.945,.878,.796,1,1,1),nrow=3)
colnames(table1) <- c("Response","1","2 or less","3 or less","4 or less")
kable(table1,caption="Table 1")
```
testdoc.md(即knitr::knit('testdoc.Rmd')的结果):
testdoc.md (ie. the result of knitr::knit('testdoc.Rmd')):
Test:
| Response| 1| 2 or less| 3 or less| 4 or less|
|--------:|-----:|---------:|---------:|---------:|
| -1| 0.391| 0.720| 0.945| 1|
| 0| 0.144| 0.425| 0.878| 1|
| 1| 0.059| 0.230| 0.796| 1|
testdoc.html 没有包含在这里，但很容易使用 knitr 从 testdoc.Rmd 重新创建.
testdoc.html not included here for length but it's easy to recreate from testdoc.Rmd using knitr.
推荐答案
一个不完美的解决方法是像这样使用 iframe:
An imperfect workaround is to use iframe like this:
library(shiny)
server <- function(input,output){ }
ui <- fluidPage(
tags$iframe(src = 'testdoc.html', # put testdoc.html to /www
width = '100%', height = '800px',
frameborder = 0, scrolling = 'auto')
)
shinyApp(ui=ui,server=server)
这篇关于在 Shiny 应用程序中包含降价表似乎破坏了 CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
