简体   繁体   中英

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?

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)

在此处输入图像描述

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM