Variety of glossy dropdown designs

Question

Variety of glossy dropdown designs

Can the text within a shiny drop-down be customized to display only part in italics? For example, I would like the Latin names in italics as shown below:

Red Oak - Quercus rubra (11671)

Bur Oak - Quercus macrocarpa (2705)

White Oak - Quercus alba (2437)

library(shiny)
library(tidyverse)

ui <- fluidPage(
  tags$head(
    tags$style(HTML("
                    .item {
                    font-style: italic;
                    }
                    .selectize-dropdown-content  {
                    font-style: italic;
                    }
                    "))
    ),
  mainPanel(
    uiOutput(outputId = "tree"),

    # Print selected tree
    verbatimTextOutput("selection")
  )
)


server <- function(input, output){

  my_list <- reactive({
    data <- c("Red Oak - Quercus rubra (11671)",
                "Bur Oak - Quercus macrocarpa (2705)",
                "White Oak - Quercus alba (2437)"
    )
    my_list <- as.character(data)

  })

  output$tree <- renderUI({
        selectInput(inputId = "tree", label = "Select a Tree", choices = my_list())
  })

  # Need reactive function to display variable that holds selected tree
  output$selection <- renderPrint({
        input$tree
  })
}

shinyApp(ui = ui, server = server)

css r shiny

Answer 1

Answer №1

To achieve italicized text only in the list, you can follow these steps:

library(shiny)

ui <- fluidPage(
  mainPanel(
    selectizeInput(inputId = "tree", label = "Select a Tree", choices = NULL),

    # Display selected tree
    verbatimTextOutput("selection")
  )
)    

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

  my_list <- reactive({
    list(`Red Oak - Quercus rubra (11671)` = "red",
         `Bur Oak - Quercus macrocarpa (2705)` = "bur")
  })

  observe({
    updateSelectizeInput(session, "tree", 
                         choices = my_list(),
                         options = list(render = I(
                           '{
    option: function(item, escape) {
    var splittedLabel = escape(item.label).split(" - ");
    return "<div>" + splittedLabel[0] + " - <i>" + splittedLabel[1] + "</i></div>"
    }
  }'
                         )))
  })

  output$selection <- renderPrint({
    input$tree
  })
}

shinyApp(ui = ui, server = server)

https://i.sstatic.net/9TM4Y.png

If you're looking to add a style for the selected option as well, use this technique found here:

EDIT

You can directly include HTML code in the list like this:

  my_list <- reactive({
    list(`Red Oak - <i>Quercus rubra</i> (11671)` = "red",
         `Bur Oak - <i>Quercus macrocarpa</i> (2705)` = "bur")
  })

Then use the following Javascript code:

  observe({
    updateSelectizeInput(session, "tree", 
                         choices = my_list(),
                         options = list(render = I(
                           '{
                           item: function(item, escape) {
                           return "<div>" + item.label + "</div>"
                           },
                           option: function(item, escape) {
                           return "<div>" + item.label + "</div>"
                           }
  }'
                         ))
                         )
    })

Answer 2

To achieve italicized text only in the list, you can follow these steps:

library(shiny)

ui <- fluidPage(
  mainPanel(
    selectizeInput(inputId = "tree", label = "Select a Tree", choices = NULL),

    # Display selected tree
    verbatimTextOutput("selection")
  )
)    

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

  my_list <- reactive({
    list(`Red Oak - Quercus rubra (11671)` = "red",
         `Bur Oak - Quercus macrocarpa (2705)` = "bur")
  })

  observe({
    updateSelectizeInput(session, "tree", 
                         choices = my_list(),
                         options = list(render = I(
                           '{
    option: function(item, escape) {
    var splittedLabel = escape(item.label).split(" - ");
    return "<div>" + splittedLabel[0] + " - <i>" + splittedLabel[1] + "</i></div>"
    }
  }'
                         )))
  })

  output$selection <- renderPrint({
    input$tree
  })
}

shinyApp(ui = ui, server = server)

https://i.sstatic.net/9TM4Y.png

If you're looking to add a style for the selected option as well, use this technique found here:

EDIT

You can directly include HTML code in the list like this:

  my_list <- reactive({
    list(`Red Oak - <i>Quercus rubra</i> (11671)` = "red",
         `Bur Oak - <i>Quercus macrocarpa</i> (2705)` = "bur")
  })

Then use the following Javascript code:

  observe({
    updateSelectizeInput(session, "tree", 
                         choices = my_list(),
                         options = list(render = I(
                           '{
                           item: function(item, escape) {
                           return "<div>" + item.label + "</div>"
                           },
                           option: function(item, escape) {
                           return "<div>" + item.label + "</div>"
                           }
  }'
                         ))
                         )
    })

Variety of glossy dropdown designs

Answer №1

EDIT

Similar questions

Mastering the Art of Resizing Video Controls: A

Alignment issue detected

Display a remote page on hover using Javascript, CSS, and HTML without providing any clickable link

Adding a CSS style to a specific child element

Creating a responsive card layout in Bootstrap 4 that utilizes the vertical space of the viewport with a scrollbar

The flexbox container is not displaying properly

Mysterious obsidian container lurking in the background of the video on Chrome version 67.0.3396

Image can be centered, but unable to center div in IE7

I am having trouble with my custom-button class not successfully overriding the btn background color property. Can anyone provide insight

Display an image from the API that rotates when hovered over with the mouse

What could be causing the lack of color change in my boxes even after confirming the prompt?

the child div within a Bootstrap 3 column is not being properly styled

Enhance R loops for optimized time performance with large datasets exceeding half a million rows

Ensure that the child element maintains equal height and width measurements within a row that is distinct

Increasing the size of iframe in a Flexbox layout

Determine the width of a div by utilizing SASS and following a series of incremental steps

What sets apart the "+" and "~" selectors in CSS?

Transforming an R dataframe into the appropriate format for utilizing the `rep` function

What is preventing SVG textPath from displaying properly? [Empty output in devtools]

Certain divs have an opacity of zero while others do not