Change size, color of badge and text of dragulaInput

Question

I use package esquisseto create the input, I wonder how I change size of the badge, color text and badge color?

if (interactive()) {
  
  library("shiny")
  library("esquisse")
  
  
  ui <- fluidPage(
    tags$h2("Demo dragulaInput"),
    tags$br(),
    dragulaInput(
      inputId = "dad",
      sourceLabel = "Old",
      targetsLabels = c("New"),
      choices = levels(iris[,"Species"]),
      width = "250px",
      height = "100px",
      status = "danger"
    ),
    verbatimTextOutput(outputId = "result")
  )
  
  
  server <- function(input, output, session) {
    
    output$result <- renderPrint({
      new_level <- input$dad$target$New
      new_level_1 <- c(new_level,input$dad$source)
       })
    
  }
  
  shinyApp(ui = ui, server = server)
  
}

Answer 1

You'll have to change the css properties of the badges. If you inspect the badge html, you'll see that they are each in a <span> tag with id=label-dragula label label-danger.

Since a span tag doesn't respond to height and width directives, you'll have to turn it into an inline-block element to change the size (thanks to this post). All of this is done in the tags$style() function - width and height are self-explanatory, background-color is the color of the badge and color is the color of the text.

library("shiny")
library("esquisse")


ui <- fluidPage(
  tags$h2("Demo dragulaInput"),
  tags$br(),
  tags$style("
    span.label-danger{
      display: inline-block;
      width: 75px;
      height: 75px;
      background-color: blue;
      color: red;
      font-size: 25px;
    }
    "),
  dragulaInput(
    inputId = "dad",
    sourceLabel = "Old",
    targetsLabels = c("New"),
    choices = levels(iris[,"Species"]),
    width = "250px",
    height = "200px",
    status = "danger"
  ),
  verbatimTextOutput(outputId = "result")
)


server <- function(input, output, session) {
  
  output$result <- renderPrint({
    new_level <- input$dad$target$New
    new_level_1 <- c(new_level,input$dad$source)
  })
  
}

shinyApp(ui = ui, server = server)