CODEWITHSUNDEEP
rshinyshinyapps
Bogaso
Bogaso

Reputation: 3308

How to change the styling of a specific Shiny widget

I want to style a shiny input from dqshiny package in my Shiny app as below -

library(shiny)
library(dqshiny)
opts <- sapply(1:100000, function(i) paste0(sample(letters, 9), collapse=""))
shinyApp(
  ui = fluidPage(
    autocomplete_input("auto1", "Unnamed:", opts, max_options = 1000)
  ),
  server = function(input, output, session) {

  }
)

I want to 2 things to achieve -

  1. Want to change the highlight color in the suggestion field from yellowish to green
  2. Also want to change the distance between the input field and the suggestion container with let say 10px.

I have a few other Widgets in my App, so above modified styling should not impact other widgets.

Is there any way to achieve this?

Any pointer will be highly appreciated.

Upvotes: 3

Views: 1157

Answers (1)

heds1
heds1

Reputation: 3438

Easiest way is just adding the CSS directly into the header. There's a really useful article about styling Shiny apps here.

library(shiny)
library(dqshiny)
opts <- sapply(1:100000, function(i) paste0(sample(letters, 9), collapse=""))
shinyApp(
    ui = fluidPage(
        tags$head(
            tags$style(
                HTML(
                '
                .autocomplete-items div:hover {
                    background-color: green;
                }
                #auto1autocomplete-list {
                    margin-top: 10px;
                }
                '
                )
            )
        ),
        autocomplete_input("auto1", "Unnamed:", opts, max_options = 1000)
    ),
  server = function(input, output, session) {
  }
)

img

Upvotes: 2

Related Questions