How to reduce the border width of sideBarPanel in Shiny?

Question

I can't for the life of me find an argument or SO question regarding this, so I'm asking:

How do you modify the size (width or height) of the gap border around a sideBarPanel ?

My best solution has been to play with border values via div for individual elements, but I'm wondering how to change the border around the whole thing?

The goal is to reduce the border gap so that I have "more room" for my elements when I zoom in (instead of them getting scrunched).

Here's sample code showing the "problem":

library(shiny)

ui <- fluidPage(

  titlePanel(
    h1("NMS Comparing tool", style = "font-size: 15px")
  ),

  sidebarPanel(width = 3, 
               div(style = "font-size: 8px;", 
                   sliderInput(inputId = "groups", 
                               label = "No. of Groups",
                               value = 4, min = 2, max = 12)
               ),  

               fluidRow(
                 column(6,offset=0,
                        div(style = "height: 105px; padding: 0px 0px",  
                            plotOutput(outputId = "scree")
                        )
                 ),

                 column(6,offset=0,
                        div(style = "font-size: 8px;padding: 0px 48px 15px; height: 105px",  #padding is top, right, bottom, left??
                            checkboxGroupInput(inputId = "labels",
                                               label = "Labels",
                                               choices = c("SPEC","Plot-End","Plot-Start"),
                                               selected = c("SPEC","Plot-End","Plot-Start")
                            )    
                        )
                 )
               ),

               fluidRow(
                 column(6,offset=0,
                        div(style = "font-size: 8px; padding: 0px 0px",      
                            radioButtons(inputId = "data",
                                         label = "Data",
                                         choices = c("PSP Only","PSP + MAP"),
                                         selected = "PSP + MAP")
                        )    
                 ),

                 column(6,offset=0,
                        div(style = "font-size: 8px;padding: 0px 10px;",  
                            radioButtons(inputId = "freq",
                                         label = "Frequency",
                                         choices = c(0.025,0.05),
                                         selected = 0.05)
                        )
                 )
               ),

               fluidRow(
                 column(6,offset=0,
                        div(style = "font-size: 8px; padding: 0px 0px; ",                 
                            radioButtons(inputId = "arrows",
                                         label = "Vector Choice",
                                         choices = c("Cumulative Change","All Samples","Hurricane"),
                                         selected = "Cumulative Change")
                        )
                 ),

                 column(6,offset=0,
                        div(style = "font-size: 8px;padding: 0px 10px",      
                            selectInput(inputId = "size",
                                        label = "Tree Size",
                                        choices = c("All","Canopy","Subcanopy","Small"),
                                        selected = "All"),
                            tags$style(type = "text/css",
                                       #".select-dropdown-content {max-height: 4px; }")
                                       "#size {height: 4px; }")
                        )
                 )
               ),

               fluidRow(
                 tags$style(type="text/css", "#info {font-size: 10px;}"),
                 verbatimTextOutput("info")
               ),
               fluidRow(
                 tags$style(type="text/css", "#SPECinfo {font-size: 10px;}"),
                 verbatimTextOutput("SPECinfo")
               )
  ),

  mainPanel(width = 9,
            plotOutput(outputId = "nms", click = "plot_click",dblclick = "plot_dblclick")

  )
)

server <- function(input, output) {

  output$scree <- renderPlot({

    par(mar = c(1.5,1.4,0.1,0.1), mgp = c(0.5,0.01,0), tcl = -0.1)
    plot(runif(99),runif(99),cex.axis=0.5,cex.lab=0.5,cex=0.75)

  },height = 95, width = 95) 

  output$nms <- renderPlot({

    plot(runif(99),runif(99))

  })

}

shinyApp(ui = ui, server = server)

Answer 1

If I get correctly what you mean you just need to modify the CSS of the shiny object. In this case the whole sideBarPanel has the html class well .

To demonstrate how to change it, I will use tableHTML::make_css . This function allows us to use a css object from within ui without loading a .css file. It will make demonstrating very easy:

If I add tags$style(make_css(list('.well', 'border-width', '10px'))) within your sideBarPanel code, keeping everythin else the same:

 sidebarPanel(width = 3, 
              div(style = "font-size: 8px;", 
                  sliderInput(inputId = "groups", 
                              label = "No. of Groups",
                              value = 4, min = 2, max = 12)
              ),  
              #tags style expects a css file
              #which is what make_css creates
              #the first element of the list is the html class to modify
              #the second is the border-width
              #the third is the value of the width
              tags$style(make_css(list('.well', 'border-width', '10px'))),
              fluidRow(
               column(6,offset=0,
                      div(style = "height: 105px; padding: 0px 0px",  
                          plotOutput(outputId = "scree")
                      )
               )

You can see that the border changes to 10px:

This means that in order to reduce it, or remove it, you need to specify 0px in the css:

 sidebarPanel(width = 3, 
              div(style = "font-size: 8px;", 
                  sliderInput(inputId = "groups", 
                              label = "No. of Groups",
                              value = 4, min = 2, max = 12)
              ),  
              tags$style(make_css(list('.well', 'border-width', '0px'))),
              fluidRow(
               column(6,offset=0,
                      div(style = "height: 105px; padding: 0px 0px",  
                          plotOutput(outputId = "scree")
                      )
               )

Which shows up like this: