shinydashboard badge menuitem - r

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!