如何减少Shiny中sideBarPanel的边框宽度？

Question

我一生都找不到关于这个的论点或SO问题，所以我问：

如何修改sideBarPanel周围间隙边框的大小（宽度或高度）？

我最好的解决方案是通过div为单个元素使用边框值，但我想知道如何更改整个元素的边框？

目标是减少边框间隙，以便在放大时为我的元素提供“更多空间”（而不是它们被挤压）。

这是显示“问题”的示例代码：

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

如果我正确理解你的意思，你只需要修改闪亮对象的 CSS。 在这种情况下，整个sideBarPanel有HTML类well 。

为了演示如何更改它，我将使用tableHTML::make_css 。 此函数允许我们在 ui 中使用 css 对象，而无需加载 .css 文件。 这将使演示变得非常容易：

如果我添加tags$style(make_css(list('.well', 'border-width', '10px')))的内sideBarPanel代码，一切都很保持其他相同：

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

可以看到边框变成了10px：

这意味着为了减少或移除它，您需要在 css 中指定0px ：

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

显示如下：