Changing css params of a dropdownButton from shinyWidgets

Question

I have designed a simple dropdownButton from the shinyWidgets package. Somehow I am unable to change the css parameters of the widget.

dropdownButton( icon = icon('info'), size = 'sm', right = T, up = F, width = '400px',
              div('my text', style = 'font-size:10px'))

I have tried to follow the css adjustment of the link here shinywidget dropdownButton CSS tag

However this only changed the pop-up window's params.

I tried to inspect the element and find the css codes but in vain.

Ideally I need to change the size of the button, the background color and opacity.

Thank you

score 2 · Accepted Answer · answered Apr 05 '20 at 21:13

Hope this helps, referring to this SO link #1, the 'status' argument lets you set custom class (see this). In the tags$style you can choose background color using 'background-color' and opacity using 'opacity'. The 'size' arguments lets you choose size of the button.

dropdownButton(status = "dropdownbutton", icon = icon('info'), size = "lg", right = T, up = F, width = '400px',
                div('my text', style = 'font-size:10px')
               ),
tags$head(tags$style(
  "
  .btn-dropdownbutton{
                      background-color: #393D3F !important;
                      border: solid; border-radius: 4px; border-width: 1px; border-color:#339FFF;
                      color: #339FFF; text-align: center; font-weight:bold; font-size: 12px;
                      opacity: 0.5 !important;
    }
  "

I am unable to change the size of the button + font size (if no icon). Some of the params such as width/height/padding seem not to be working. — Arkadi w, Apr 06 '20 at 10:50

Changing css params of a dropdownButton from shinyWidgets

1 Answers1

Linked