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

Question

我不能为我的生活找到一个关于这个的争论或问题，所以我要问：

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

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

目标是缩小边界差距，以便我有更多的空间和＃34;当我放大时（而不是他们被碾碎）我的元素。

此处的示例代码显示了＆＃34;问题＆＃34;：

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。在这种情况下，整个ALLEXCEPT()具有html类sideBarPanel。

为了演示如何更改它，我将使用well。此函数允许我们在ui中使用css对象而不加载.css文件。它将使演示变得非常简单：

如果我在tableHTML::make_css代码中添加tags$style(make_css(list('.well', 'border-width', '10px')))，请保持其他所有内容相同：

sideBarPanel

您可以看到边框更改为10px：

这意味着为了减少或删除它，您需要在css中指定 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") ) ) ：

0px

显示如下：