Adjust the height of bsCollapsePanel in shiny app

Question

I'm using the shinyBS package in a shiny app and I'm struggle with adjusting the height of the panel ! I have tried to put the height=100% in bsCollapse and bsCollapsePanel but it did not work !

library(shiny)
library(shinythemes)
library(shinyjs)
library(collapsibleTree)
library(shinyBS)
library(shinycssloaders)


ui <- fluidPage(
  theme = shinytheme("flatly"),
  useShinyjs(),

  navbarPage(HTML("MyApp"),
             tabPanel("Home", 

                  bsCollapse(id = "output_data_all", multiple = TRUE,open = "Data",
                                        
                        bsCollapsePanel("Data", style = "info",
                                       
                            selectInput(inputId = 'Ind1',
                                        label = 'Select Container',
                                        choices = c(),
                                        selected = NULL),
                                        br(),br(),
                                        withSpinner(collapsibleTreeOutput("t1"),type=5),
                                        br(),br()
                                              
                                        ))
                      
             )
  )
)
Server <- function(input, output,session){
  
  output$t1 <- renderCollapsibleTree({
    
  })
}

@Iz100, I think it is clear : `height=100%` ? I would like the `bsCollapsePanel` fill the entire page, in the current version in my code is just half of the page which I could not change it ! — Haribo, Aug 02 '22 at 07:20

score 1 · Accepted Answer · answered Aug 02 '22 at 13:25

You can enclose the contents of the panel in a div with style = "height: 70vh" (adjust 70 as you want - this means 70% of the viewport height):

ui <- fluidPage(
  theme = shinytheme("flatly"),
  useShinyjs(),

  navbarPage(
    HTML("MyApp"),
      tabPanel("Home", 

        bsCollapse(id = "output_data_all", multiple = TRUE,open = "Data",
       
                    bsCollapsePanel("Data", style = "info",

                        div(
                        style = "height: 70vh",                                       
                                selectInput(inputId = 'Ind1',
                                        label = 'Select Container',
                                        choices = c(),
                                        selected = NULL),
                                br(),br(),
                                    withSpinner(collapsibleTreeOutput("t1"),type=5),
                                br(),br()
                                              
                            )
                )
                      
             )
    )
  )
)

Adjust the height of bsCollapsePanel in shiny app

1 Answers1