Shiny中tabpanel搭配infobox无法动态调整高度如何解决

问题原因 #

这个问题是infoBox默认采用浮动布局导致的，浮动元素会脱离普通文档流，父级tabPanel容器无法识别其高度，从而出现高度塌陷。plotOutput为普通块级元素，不存在浮动问题，因此可以正常撑开父容器高度。

解决方法 #

以下两种方案任选其一即可： #

方案1：使用Bootstrap自带的clearfix类清除浮动

直接在infoBoxOutput外层套一个设置了clearfix类的div即可，修改ui中tabPanel部分的代码：

tabPanel(
    title = "Tab1",
    div(class = "clearfix", infoBoxOutput(outputId = "ibo"))
)

方案2：添加全局CSS规则适配所有tabPanel

在dashboardBody开头添加自定义样式，统一设置tab内容区自动识别浮动元素高度：

dashboardBody(
    tags$style(".tab-content .tab-pane { overflow: auto; }"),
    # 其余原有代码保持不变
)

完整可运行示例（采用方案1） #

library("shiny")
library("shinydashboard")
library("shinydashboardPlus")

ui <- dashboardPage(
    header = dashboardHeader(),
    sidebar = dashboardSidebar(),
    body = dashboardBody(
        
        tabBox(
            tabPanel(
                title = "Tab1",
                div(class = "clearfix", infoBoxOutput(outputId = "ibo"))
            ),
            tabPanel(
                title = "Tab2",
                plotOutput(outputId = "po")
            ),
            width = 12
        )
        
    )
)

server <- function(input, output) {
    
    output$ibo <- renderInfoBox({
        infoBox(
            title = "Infobox",
            value = 42
        )
    })
    
    output$po <- renderPlot({
        plot(mtcars$mpg, mtcars$cyl)
    })
    
}

shinyApp(ui = ui, server = server)

内容的提问来源于stack exchange，提问作者benne