Установить расстояние между виджетом и его заголовком (текстом) в блестящем

Question

У меня есть простое блестящее приложение, которое отображает три кнопки 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.Если вы уменьшите margin до 0 пикселей, добавив style='margin: 0px', вы получите желаемый результат (вы также можете использовать: margin-top, margin-bottom и т. Д.).

Если вы хотите адаптировать другие блестящие виджеты, вы всегда можете заключить их в div и адаптировать их с аргументом style (пример: div(style='margin: 0px; padding: 15px;', selectInput(...))).Информацию о других div аргументах можно найти здесь .

Ваш пример

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)