0

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)
Vlad
  • 3,058
  • 4
  • 25
  • 53

2 Answers2

1

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

Victorp
  • 13,636
  • 2
  • 51
  • 55
0

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

enter image description here

jhk0530
  • 148
  • 6