Как изменить цвет контейнера элемента pickerInput?

Question

Когда я перемещаю элемент pickerInput влево с помощью margin-left, появляется пустое пространство, которое я не могу получить того же цвета, что и остальная часть страницы.

Я пробовал много вариантовКонфигурации CSS, но отмечая работает

library(shinyWidgets)
library(shiny)

ui <- fluidPage(
  tags$style(
    HTML(
      "

body{
 background-color: grey;
}


          button, select {
          margin-left: 90px;
          background-color: darkgrey;
        }



  ")
  ),





  fluidRow(
    pickerInput(
      inputId = "select1",
      label = "pickerInput",
      choices = c(3, 4, 8, 5, 2, 6, 7),
      options = list(title = "Please Select Desired Number")
    )
  )
)

server <- function(input, output) {

}

shinyApp(ui = ui, server = server)

Фон должен быть похож на остальную часть страницы в сером

Answer 1

Лучше обернуть pickerInput внутри тега div.

ui <- fluidPage(
    tags$head(tags$style("body{background:grey}")),
    fluidRow(
        tags$div(
            style = "margin-left:90px",
            pickerInput(
                inputId = "select1",
                label = "pickerInput",
                choices = c(3, 4, 8, 5, 2, 6, 7),
                options = list(title = "Please Select Desired Number")
            )
        )
    )
)

Если вам нужно применить этот стиль к нескольким pickerInput, все же лучше использовать div теги дляоберните pickerInput и используйте класс для селектора CSS.

ui <- fluidPage(
    tags$head(
        tags$style(
            "body{
                background:grey;
            }
            .ident-picker {
                margin-left:90px;
            }"
        )
    ),
    fluidRow(
        tags$div(
            class = "ident-picker",
            pickerInput(
                inputId = "select1",
                label = "pickerInput",
                choices = c(3, 4, 8, 5, 2, 6, 7),
                options = list(title = "Please Select Desired Number")
            )
        )
    ),
    fluidRow(
        tags$div(
            class = "ident-picker",
            pickerInput(
                inputId = "select2",
                label = "pickerInput2",
                choices = letters,
                options = list(title = "Please Select Desired characters")
            )
        )
    )

)

Кроме того, вы можете написать функцию-оболочку для существующих функций пользовательского интерфейса

library(shiny)
library(rlang)

actionButtonPretty <- function(inputId, label){
    actionButton(inputId, label, style="color: white; background-color:#003c69; border-color: #003c69; ")
}

ui <- fluidPage(
    actionButtonPretty("button1","Pretty Button 1"),
    actionButtonPretty("button2","Pretty Button 2")
)

server <- function(input, output, session) {

}

shinyApp(ui, server)