shinydashboard badge menuitem

Question

How to make a menutem badge to align differently than default? in the shinyUI.:

menuItem("Test", tabName = "test", icon = icon("line-chart"),badgeLabel = "2nd", badgeColor = "green")

Full example:

library(shiny)
library(shinydashboard)
# Default shiny
ui <- dashboardPage(
dashboardHeader(title = "Example"),
dashboardSidebar(
sidebarMenu(
  menuItem("Test", tabName = "test", icon = icon("line-chart"),
  badgeLabel   = "2nd", badgeColor = "green")
)),
dashboardBody(
tabItems(
  tabItem(tabName = "test",
      box(title = "How-to",status = "primary",solidHeader = TRUE,collapsible=TRUE, width = 8,
      sliderInput("bins",
                 "Number of bins:",
                 min = 1,
                 max = 50,
                 value = 30),
    # Show a plot of the generated distribution
    plotOutput("distPlot")
      )
    )
  )))
 # Define server logic required to draw a histogram
server <- function(input, output) {
   output$distPlot <- renderPlot({
  # generate bins based on input$bins from ui.R
  x    <- faithful[, 2] 
  bins <- seq(min(x), max(x), length.out = input$bins + 1)

  # draw the histogram with the specified number of bins
  hist(x, breaks = bins, col = 'darkgray', border = 'white')
  })
 }
# Run the application 
shinyApp(ui = ui, server = server)

In the browser inspecting it shows the following code/:

<small class="badge pull-right bg-green">2nd</small> 

test pic

I need:

<small class="badge center-block bg-green">2nd</small> 

desired pic

Any idea?

Answer 1

You can use css as follows: tags$style(type = 'text/css',".badge{min-width: 200px;}")

In your code it would come something like this:

library(shiny)
    library(shinydashboard)
    # Default shiny
    ui <- dashboardPage(
      dashboardHeader(title = "Example"),
      dashboardSidebar(
        ##The added css
        tags$style(type = 'text/css',".badge{min-width: 200px;}"),
        sidebarMenu(
          menuItem("Test", tabName = "test", icon = icon("line-chart"),
                   badgeLabel   = "2nd", badgeColor = "green")
        )),
      dashboardBody(
        tabItems(
          tabItem(tabName = "test",
                  box(title = "How-to",status = "primary",solidHeader = TRUE,collapsible=TRUE, width = 8,
                      sliderInput("bins",
                                  "Number of bins:",
                                  min = 1,
                                  max = 50,
                                  value = 30),
                      # Show a plot of the generated distribution
                      plotOutput("distPlot")
                  )
          )
        )))
    # Define server logic required to draw a histogram
    server <- function(input, output) {
      output$distPlot <- renderPlot({
        # generate bins based on input$bins from ui.R
        x    <- faithful[, 2] 
        bins <- seq(min(x), max(x), length.out = input$bins + 1)

        # draw the histogram with the specified number of bins
        hist(x, breaks = bins, col = 'darkgray', border = 'white')
      })
    }
    # Run the application 
    shinyApp(ui = ui, server = server)

You get something like this:

Hope it helps!