html - 设置 Shiny 的小部件与其标题(文本)之间的距离

Question

我有一个简单 Shiny 的应用程序，它显示三个 colourInput() 按钮。我会减少每个按钮和它的标题之间的空白，以便更接近它。

 #ui.r
     library(shiny)
    library(shinydashboard)
    shinyUI( dashboardPage(
      dashboardHeader(
      title="Styling Download Button"
      ),
        dashboardSidebar(

          div(style="display: inline-block;vertical-align:top; width: 115px;",colourInput("rightcolor",h5("Left"), value = "#00B2EE")),
          div(style="display: inline-block;vertical-align:top; width: 115px;",colourInput("overlapcolor",h5("Overlap"), value = "#7CCD7C")),
          div(style="display: inline-block;vertical-align:top; width: 115px;",colourInput("leftcolor",h5("Right"), value = "#FFFACD")),


        ),
        dashboardBody()

    ))
    #server.r
    shinyServer(function(input, output) {

    })

Answer 1

您必须更改显示标题的 div 元素。一种方法是将 style 参数添加到 h5 函数。如果通过添加 style='margin: 0px' 将 margin 减少到 0 像素，您将获得所需的结果(您也可以使用:margin-top 、margin-bottom 等)。

如果你想调整其他 Shiny 小部件，你总是可以将它们包装在 div 中并使用 style 参数调整它们(例如:div(style= '边距:0px；填充:15px；'，selectInput(...)))。可以找到关于其他 div 参数的信息 here .

你的例子

library(shiny)
library(shinydashboard)
library(colourpicker)

# Create ui
ui <- shinyUI( dashboardPage(
  dashboardHeader(
    title="Styling Download Button"),
  dashboardSidebar(
    div(style="display: inline-block;vertical-align:top; width: 115px;",colourInput("rightcolor",h5("Left", style='margin: 0px;'), value = "#00B2EE")),
    div(style="display: inline-block;vertical-align:top; width: 115px;",colourInput("overlapcolor",h5("Overlap", style='margin: 0px;'), value = "#7CCD7C")),
    div(style="display: inline-block;vertical-align:top; width: 115px;",colourInput("leftcolor",h5("Right", style='margin: 0px;'), value = "#FFFACD"))),
  dashboardBody()
))

# Create Server
server <- shinyServer(function(input, output) {})

# Run app
shinyApp(ui, server)