r - wellPanel Rshiny 在滚动时被输入选项切断

Question

Rshiny wellPanel 不透明度问题

如何确保我闪亮的应用程序的 wellPanel 不会被 UI 中的其他元素截断？我希望用户滚动并且包含标题的 wellPanel 将在 excel 中像冻结的行一样。

谢谢！

library(shiny)

ui <- fluidPage(

    
    mainPanel(
        div('data-spy'="affix", 'data-offset-top'="1",
            wellPanel(id = "tags", class = "myclass1",
                      
                      tags$style(HTML(".datepicker {z-index:99999 !important;}")),
                      titlePanel(title= strong("title that I don't want cut off")) 
            , width = 12)),
        hr(),
        
        fixedRow(
            tags$style(HTML(".date {z-index:9999}")),
            
            
            column(12, 
                   dateInput("date", 
                             h3("Date:"), 
                             value = "2021-01-01"))   
        ),
        hr(),
        
        fixedRow( 
            
            
            column(8, 
                   numericInput("room_num", 
                                h3("Number of Rooms"), 
                                value = 0, min=0, max=99))
        ),
        fixedRow( 
            
            
            column(8, 
                   numericInput("room_num", 
                                h3("Number of Rooms"), 
                                value = 0, min=0, max=99))
        ),
        fixedRow( 
            
            
            column(8, 
                   numericInput("room_num", 
                                h3("Number of Rooms"), 
                                value = 0, min=0, max=99))
        ),
        fixedRow( 
            
            
            column(8, 
                   numericInput("room_num", 
                                h3("Number of Rooms"), 
                                value = 0, min=0, max=99))
        ),
        fixedRow( 
            
            
            column(8, 
                   numericInput("room_num", 
                                h3("Number of Rooms"), 
                                value = 0, min=0, max=99))
        ),
        fixedRow( 
            
            
            column(8, 
                   numericInput("room_num", 
                                h3("Number of Rooms"), 
                                value = 0, min=0, max=99))
        ),
        fixedRow( 
            
            
            column(8, 
                   numericInput("room_num", 
                                h3("Number of Rooms"), 
                                value = 0, min=0, max=99))
        ),
        fixedRow( 
            
            
            column(8, 
                   numericInput("room_num", 
                                h3("Number of Rooms"), 
                                value = 0, min=0, max=99))
        ),
        fixedRow( 
            
            
            column(8, 
                   numericInput("room_num", 
                                h3("Number of Rooms"), 
                                value = 0, min=0, max=99))
        ),
        fixedRow( 
            
            
            column(8, 
                   numericInput("room_num", 
                                h3("Number of Rooms"), 
                                value = 0, min=0, max=99))
        ),
        
    ))


server <- function(input, output) {

}

shinyApp(ui = ui, server = server)

Answer 1

你需要的是一个fixeddiv。然后下一个兄弟将使用 apadding-top来偏移下一个元素。但是，这种方法要求您明确指定 theheight和 the padding。

注意我还将.container类添加到第一行，以width从引导框架中获得正确的：

library(shiny)

css <- HTML(paste(".fixed { position: fixed; height: 105px; padding-left:0; padding-right: 0 }",
                  ".fixed+.row { padding-top: 107px}", sep = "\n"))

ui <- fixedPage(
   tags$head(tags$style(css)),
   fixedRow(wellPanel(h2("Title")), class = "fixed container"),
   fixedRow(h3("Title"), numericInput("inp1", "Number:", value = 0)),
   fixedRow(h3("Title"), numericInput("inp2", "Number:", value = 0)),
   fixedRow(h3("Title"), numericInput("inp3", "Number:", value = 0)),
   fixedRow(h3("Title"), numericInput("inp4", "Number:", value = 0)),
   fixedRow(h3("Title"), numericInput("inp5", "Number:", value = 0)),
   fixedRow(h3("Title"), numericInput("inp6", "Number:", value = 0)),
   fixedRow(h3("Title"), numericInput("inp7", "Number:", value = 0)),
   fixedRow(h3("Title"), numericInput("inp8", "Number:", value = 0)),
   fixedRow(h3("Title"), numericInput("inp9", "Number:", value = 0)))

server <- function(...) {}

shinyApp(ui, server)