スクロール可能なコンテンツを持つtabBoxの固定高さ

Question

高さを固定したい場合は、tabBoxesのコンテンツのスクロールバーを表示する方法はありますか？さらに、スクロールバーは、タブヘッダー自体ではなく、コンテンツに対してのみ機能します。私が解決策に出た最も近いのは、.tabコンテンツの高さを修正することでしたが、これは明らかにtabBoxの高さとタブヘッダの高さに大きく依存します。ウィンドウのサイズを変更すると、タブヘッダーのサイズが大きくなり、この回避策が失敗することがあります。また、これによってすべての.tab-content要素の高さが修正されるため、異なる高さの新しいtabBoxを作成したい場合、これも機能しません。

これは、問題を解決するための私の試みの最小の例です。 2番目のタブが最初の行に収まらないようにウィンドウのサイズを変更すると、スクロールバーとコンテンツが正しく機能しなくなります。

if (interactive()) { 
    library(shiny) 

    body <- dashboardBody(
    tags$head(tags$style(HTML(".nav-tabs-custom { overflow-y: hidden; } .nav-tabs-custom>.tab-content { overflow-y: auto; height: 100px; }"))), 
    fluidRow(
     tabBox(
     height = "150px", 
     tabPanel(
      title = "Tab Header 1 - Scrollbar failing when resizing", 
      p("Test 1"), 
      p("Test 2"), 
      p("Test 3"), 
      p("Test 4"), 
      p("Test 5") 
     ), 
     tabPanel(
      title = "Tab Header 2 - looooooooooooooooong", 
      p("Test 1"), 
      p("Test 2") 
     ) 
    ) 
    ) 
) 

    shinyApp(
    ui = dashboardPage(dashboardHeader(disable = TRUE), dashboardSidebar(disable = TRUE), body), 
    server = function(input, output) { 
    } 
) 
} 

ご協力いただければ幸いです。

Answer 1

キーは、スクロールバーが必要なdivにCSSスタイルoverflow-y:scroll;を追加することです。この場合、私が使用して最初tabPanel内divにそれを追加しました：これはあなたがdiv()の内部でスクロールしたいオブジェクトをラップする必要があり

div(style = 'overflow-y:scroll;', ...)

。

元の例を編集して、大きなデータテーブルにスクロールを追加する方法を示しました。同じdivで手動で高さを500pxに設定して、スクロールバーが動作していることを確認します。

if (interactive()) { 
    library(shiny) 

    body <- dashboardBody(
    fluidRow(
     tabBox(
     tabPanel(
      title = "Tab Header 1 - Scrollbar failing when resizing", 
      div(style = 'overflow-y:scroll;height:500px;', 
      tableOutput('largedata') 
     ) 

     ), 
     tabPanel(
      title = "Tab Header 2 - looooooooooooooooong", 
      p("Test 1"), 
      p("Test 2") 
     ) 
    ) 
    ) 
) 

    shinyApp(
    ui = dashboardPage(dashboardHeader(disable = TRUE), dashboardSidebar(disable = TRUE), body), 
    server = function(input, output) { 
     output$largedata <- renderTable(mtcars) 
    } 
) 
}