在Shiny App中嵌入CSS

Question

我正在努力使用CSS将风格化的有序列表嵌入我闪亮的应用程序的首页。我遇到的具体问题是我的目标网页（概述标签）上的所有内容都是空白的，直到我离开＆＃34;概述＆＃34;页面，然后返回它。当我回到＆＃34;概述＆＃34;选项卡，所有内容都按预期显示在页面上。

如果我在顶部注释掉tags（）参数，则会出现侧栏和其他文本，但不会出现预期的有序列表。所以，也许这是问题所在的一个暗示，但我找不到解决方案，可以使用支持。

任何人都可以找到一种方法来使代码工作，以便在启动闪亮的应用程序时，使用侧边栏页面文本以及有序列表立即显示概述页面吗？

我的目录结构如下：

目录结构

--myApp' folder holding ui.r and server.r

-- 'HTML' folder as subdirectory in 'myApp' holding the html file below called 'methods.html'

--'www' folder as subdirectory in 'myApp' holding the file called 'list.css'

我已提供以下所有代码，以重现我遇到的问题。感谢您提供的任何支持。

ui.R

library(markdown)
shinyUI(navbarPage("Toolbar",
 tags$head(
    tags$link(rel = "stylesheet", type = "text/css", href = "list.css")
  ),
tabPanel("Overview",
titlePanel("Some Text"),
  sidebarLayout(
    sidebarPanel(
      h2("Purpose of this web application"),
      p("Text to go here"),
      br(),
      br()
    ),
    mainPanel(
        includeHTML("HTML/methods.html")
   )
  )
), # end tabpanel
  tabPanel("Do Stuff Tab 1",
    sidebarLayout(
      sidebarPanel( 
    fileInput('Rfile1', 'Read in File 1', accept=c('.RData', '.Rda')),
    fileInput('Rfile2', 'Read in File 2', accept=c('.RData', '.Rda'))
    ), # end sidebar
        mainPanel(
        h1('Some Report')
      )
    )
  ) # end tabpanel 
)) # end program

server.r

shinyServer(function(input, output, session) {
File <- reactive({
infile <- input$school
if (is.null(infile)) return(NULL)      
read.csv(infile$datapath, header=input$headerForPE, sep=input$sepForPE, quote=input$quoteForPE, 
stringsAsFactors = FALSE)
})
}) # end Program

HTML（methods.html）

<ol class="circle-list">
<li>
<h2>Foo 1</h2>
<p>This will have text</p>
</li>
<li>
<h2>Foo 2</h2>
<p>Blah Blah</p>
</li>
</ol>   

CSS（list.css）

<style>
body{
margin: 40px auto;
width: 500px;
}
ol{
counter-reset: li;
list-style: none;
*list-style: decimal;
font: 15px 'trebuchet MS', 'lucida sans';
padding: 0;
margin-bottom: 4em;
text-shadow: 0 1px 0 rgba(255,255,255,.5);
}
ol ol{
margin: 0 0 0 2em;
}
.circle-list li{
padding: 2.5em;
border-bottom: 1px dashed #ccc;
}
.circle-list h2{
position: relative;
margin: 0;
}
.circle-list p{
margin: 0;
}
.circle-list h2:before{
content: counter(li);
counter-increment: li;
position: absolute;    
z-index: -1;
left: -1.3em;
top: -.8em;
background: #f5f5f5;
height: 1.5em;
width: 1.5em;
border: .1em solid rgba(0,0,0,.05);
text-align: center;
font: italic bold 1em/1.5em Georgia, Serif;
color: #ccc;
-moz-border-radius: 1.5em;
-webkit-border-radius: 1.5em;
border-radius: 1.5em;
-webkit-transition: all .2s ease-out;
-moz-transition: all .2s ease-out;
-ms-transition: all .2s ease-out;
-o-transition: all .2s ease-out;
transition: all .2s ease-out;    
}
.circle-list li:hover h2:before{
background-color: #ffd797;
border-color: rgba(0,0,0,.08);
border-width: .2em;
color: #444;
-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
-ms-transform: scale(1.5);
-o-transform: scale(1.5);
transform: scale(1.5);
}
</style>