I have an application which uses box::dropdownMenu to render a dropdown menu which the user will use to set plot options. I'm able to implement this functionality without any issue, but I would like to do two additional things.

Is it possible to: (1) Hide the arrow to the right of the cog-icon? (2) On the dropdown menu, is it possible to keep the text left-alligned, but have the radio buttons be right aligned?

Current State:

Desired End Result:

Code:

library(shiny)
library(shinyWidgets)
library(shinydashboardPlus)

ui <- fluidPage(
  box(
    title = "Box Title",
    dropdownMenu = dropdown(
      width = "200px",
      icon = icon("gear"),
      materialSwitch(inputId = "Id079", label = "Color:"),
      materialSwitch(inputId = "Id079", label = "Display Goal:"),
    ),
    textOutput("text")
  )
)

server <- function(input, output, session) {
  output$text <- renderText("Hello World!")
}

shinyApp(ui, server)

CodePudding user response：

1. To remove the arrow, one should change style to something other than the default. You can use fill or bordered for example.

shinyWidgets::dropdown(
      width = "200px",
      style = "fill",
      icon = icon("cog"),
      materialSwitch(inputId = "Id079", label = "Color:"),
      # Change IDs to unique IDs otherwise it won't work
      materialSwitch(inputId = "Id080", label = "Display Goal:"),
    )

2. For the alignment, you can play around with the .label-default elements (attrinutes?)

ui <- fluidPage(
  # Need to play with the margin-left part
  tags$head(tags$style(HTML(".label-default{ 
                            margin-left: 50px;}
              "))), 

    shinyWidgets::dropdown(
      width = "300px",
      style = "fill",
      icon = icon("cog"),
      materialSwitch(inputId = "Id079", label = "Color:"),
      materialSwitch(inputId = "Id080", label = "Display Goal:"),
    ),
    textOutput("text")
  )

The problem with this is that it is not easy to uniformly change the margins for non-equal labels.