Search code examples
rshinydashboardtabpanelinfobox

Dynamic height adjustment of tabpanel does not work with infobox


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?


Solution

  • 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)
    

    enter image description here