javascript - R Shiny : selectInput items always scroll on top of a fixedPanel

Question

我有一个 R Shiny 文件，它通过 fixedPanel() 在页面顶部包含一个横幅。它还有一个侧边栏，其中包含一个用 selectInput() 创建的菜单。当我向上滚动页面时，selectInput 菜单是唯一在横幅顶部滚动的 UI 项目。我试过在包含固定面板之前将侧边栏和 selectInput 项目放在 absolutePanel 中，认为这可能会导致它们处于较低的“层”，但这并没有阻止这种行为。下面是产生这种行为的代码。请注意，我添加了一个 1600 像素的空白图像，以便可以滚动，并且我没有包含任何其他 UI 项目(但它们会滚动到固定面板下方)。这是 app.R 文件:

library(shiny) 

shinyApp(
   ui <- shinyUI(
      fluidPage( 

         absolutePanel(0, 0, width="100%", height="100%",

            # Leave a gap for the fixed panel containing the RAFT banner at the top of the page.
            fluidRow(
               img(src="", height=110)
            ),

            fluidRow(
               sidebarPanel(

                  # Insert a menu.
                  selectInput(
                     inputId="select", 
                     label="Select:",
                     choices=1:4
                  ),
                  img(src="", height=1600)
               )
            )
         ),

         # Insert a fixed panel containing the banner at the top of the page.
         fixedPanel(top="0%", height="60", left="0%", width="100%",
            img(src="banner.jpg", height=90, width=600)
         )
      )
   ),

   server <- shinyServer(function(input, output, session) {
   })
)

这里是引用的“banner.jpg”图像:

这是预期的行为吗？有没有办法让 selectInput 菜单项在页面向上滚动时保持在 fixedPanel 下方？

Answer 1

在没有得到任何回应后，我开始挖掘支持 shiny 包的 CSS 和 JS 文件。我将 Shiny 的 R 代码转换为 HTML 并开始了一个试错过程，首先删除文件，然后删除文件中的行，我发现在文件 selectize-bootstrap3.css 中，类选择器 .selectize-input 被定义为具有 1 的 z-index。这显然足够高以使其 float 在我创建的用作横幅的 fixedPanel 元素上方。解决方案是给 fixedPanel 一个更高的 z-index，所以我替换了这段代码:

     fixedPanel(top="0%", height="60", left="0%", width="100%",
        img(src="banner.jpg", height=90, width=600)
     )

使用此代码:

     fixedPanel(style="z-index:100;",
        top="0%", height="60", left="0%", width="100%",
        img(src="banner.jpg", height=90, width=600)
     )

这解决了问题。