Vlad
Vlad

Reputation: 3764

R shinydashboardPlus - make the pretty switch pretty again

Using shinydashboardPlus with prettySwitch in the right sidebar - the alignment of the switch elements are messed up

ugly switch

Is there a way to make the switch pretty again like this

pretty switch

Here is the code. Setting md = FALSE will work, but will affect the look of everything else, so I don't want to do that.

library(shinydashboardPlus)
library(shinyWidgets)

ui <- dashboardPagePlus(
  dashboardHeaderPlus(
    enable_rightsidebar = TRUE
  )
  , dashboardSidebar()
  , dashboardBody()
  , rightSidebar(
    background = "light"
    , rightSidebarTabContent(
      id = "id"
      , title = "title"
      , prettySwitch(
        inputId = "switch_id"
        , label = "switch"
      )
    )
  )
  , md = TRUE
)

server <- function(input, output){}

shinyApp(ui, server)

Upvotes: 0

Views: 849

Answers (2)

Victorp
Victorp

Reputation: 13856

There's a CSS conflict with Material Design theme, to fix it, you can add the following CSS code into your application :

  , tags$style(HTML(
    ".pretty > div > label {font-size: 14px !important; line-height: 1px !important;}"
  ))

Above prettySwitch for example

Upvotes: 1

jhk0530
jhk0530

Reputation: 169

Even not elegant way, but you could adjust it by modify CSS

enter image description here

Upvotes: 0

Related Questions