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

Posted 2023-03-24

【中文标题】wellPanel Rshiny 在滚动时被输入选项切断

【英文标题】：wellPanel Rshiny cut off by input options when scrolling

【发布时间】：2021-08-31 06:33:00

【问题描述】：

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)

【问题讨论】：

刚刚包含一个示例代码，谢谢

【参考方案1】：

你需要的是一个fixed div。然后下一个兄弟将使用padding-top 来偏移下一个元素。但是，这种方法需要您明确指定 height 和 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)