Dynamic height adjustment of tabpanel does not work with infobox

Question

I am creating a dashboard with shiny and want to use infobox inside a tabpanel. But the height of the panel does not dynamically adjust to the height of the infobox. If I integrate a chart in a panel, then it adjusts automatically.

My code looks like this:

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

ui <- dashboardPage(
    header =     dashboardHeader()
    ,sidebar = dashboardSidebar()
    ,body = dashboardBody(
        
        tabBox(
            tabPanel(
                title = "Tab1"
                ,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)

How can I adjust the height of the tabpanel to the height of the infobox?

score 1 · Accepted Answer · answered Nov 22 '21 at 21:08

Very easy, wrap the infoBoxOutput inside a fluidRow:

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

ui <- dashboardPage(
    header =     dashboardHeader()
    ,sidebar = dashboardSidebar()
    ,body = dashboardBody(
        
        tabBox(
            tabPanel(
                title = "Tab1",
                fluidRow(
                    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)

Dynamic height adjustment of tabpanel does not work with infobox

1 Answers1