0

hello im very new to styling shiny with css and is there a way to change select input in shiny

fluidRow(
        tags$head(
          tags$style(
            "
                        .brand-picker button.btn.dropdown-toggle.btn-default {
                          background-color: #eaeaea;
                          color: black;
                          font-weight: bold;
                          transition: transform 0.2s ease-in-out;
                        }
                        
                        .brand-picker button.btn.dropdown-toggle.btn-default.collapsed {
                         transform: rotate(180deg);
                        }
                        "
          )
        ),
          column(4, tags$div(
            shinyWidgets::pickerInput(
              inputId = "brand", "Brand", 
              choices = unique(df1$Brand), 
              selected = "Kanzler",
              options = list(`actions-box` = TRUE),
              multiple = T), 
            class = "brand-picker"
            )),)

i tried with this code but nothing happen, i just want the arrow animation and the rest is just set it to default like the normal select input

my expected result is the arrow animation is moving from down to up when we clicked the select input

Muhammad Rafif
  • 43
  • 4

1 Answers1

0

There's not enough code in your question to really answer your specific questions. My guess is that you need to include JavaScript not just CSS to get the animation working right. It's also possible that the CSS is targeting the wrong selector.

There may be an R package that has already implemented the type of dropdown menus you want, but I'll answer this question in a different way by showing that you can include raw HTML, CSS and JavaScript directly in a shiny app, so you could make a shiny app that directly uses the code from your example.

Link to example: codepen.io/zoomodesign/pen/yNbVVZ

Here's how you could remake the example you linked to in your comments by directly using their original code. I'm not recommending doing this for production, but it can be helpful for learning and figuring out which pieces of their code you want for their project.

step 0: If you're using rstudio create a shiny app as a project

You can do this by creating a new project and then selecting shiny app as the project type. This isn't actually required but might make things easier.

step 1: Create a www/ folder in the app's directory

You can do this with this dir.create("www")

Step 2: Create three blank files

If you are using RStudio you can directly create HTML, CSS and Javascript files by clicking new file and then selecting the right file type. For this example save the files with the following names:

  1. css_from_your_example.css Save this file in the app's www/ folder. Make sure the file extension is .css
  2. js_from_your_example.js Save this file in the app's www/ folder. Make sure the file extension is .css
  3. . html_from_your_example.html Save this file in the app's main directory. If you created a project for the app this should also be the working directory

Step 3: copy and paste HTML, CSS and Javascript

Copy the HTML into the .html file, the CSS into the .css file, and the JavaScript into the .js file. I'm not sure if you have to, but I used the compiled css instead of sass.

step 4: include the HTML, CSS and JavaScript into your shiny UI

There are various ways to do this, here are some references:

Here's the R code for the shiny:

library(shiny)

ui <- fluidPage(   

# include css in the head section

tags$head(
  tags$link(rel = "stylesheet", type = "text/css", href = "css_from_your_example.css")
), 

# Include the HTML wherever you want it to appear in your shiny

includeHTML("html_from_your_example.html"),

# I include scripts at the end

tags$script(src = "js_from_your_example.js")


)


server <- function(...){}

shinyApp(ui, server)

Here's what the shiny looks like enter image description here

Step 5 Modify as needed

This is an example of how to use HTML, CSS, and Javascript in a shiny app generally. Directly coping isn't a great long-term strategy both because of plagerism and stuff but also because you'll eventually need to modify things to meet your specifications. Here are some ideas for how to find the pieces of JS and CSS from your example that you want for your project:

You can find css selectors using the developer tools in your browser. Open them by right clicking and then left clicking "inspect" or "developer tools".

In the developer tools you can directly modify the css and run javascript at run time. Shiny sometimes has unexpected class names and extra containers so the developer tools can be super useful for finding the right selector. Any CSS changes you make with the developer tools can be copied and pasted directly back into the css file you're using for your shiny app.

Once you've found the selector you want you can target them in javascript using Document.querySelector('CSS SELECTOR GOES HERE') or another similar method. You can also change the appearance of the selector in the css using something like this CSS SELECTOR {ATTRIBUTE:ATTRIBUTE VALUE;}

Here's a reference to more about the developer tools: https://torquemag.io/2020/06/browser-developer-tools-tutorial/

Russ
  • 1,385
  • 5
  • 17