dropdownBlock icon not working

[scottyraymond]

Good Day,

I am using shinydashboardPlus 0.6.0.9000 and I came across a minor error in the generated HTML today. For dropdownBlock elements, I couldn't figure out why the icons were not showing up. After inspecting the HTML I can see that the automatic HTML generation may need to be updated, as it is not handling the icon properly.

Please see below for the HTML extracted from the Google Chrome inspector.

<li class="dropdown" id="mydropdown">
  <a href="#" class="dropdown-toggle" data-toggle="dropdown">
    <!-- Note the <i class="fa fa-sliders"></i>" -->
    <i class="fa fa-<i class="fa fa-sliders"></i>"></i>
    Dropdown 1
    <!-- Would be good to ensure documentations shows 'label' as a property  -->
    <span class="label label-danger">2</span>
  </a>
  <ul class="dropdown-menu" style="left: 0; right: auto;"> ... </ul>
</li>

Another item would be to ensure the the help documentation includes mentions of 'label' and 'badgeStatus' properties.

Thanks.
Scott

[DivadNojnarg]

Hi @scottyraymond ,

can you send me the R code that produces this error?

Thanks

David

[scottyraymond]

Hi David,

Sorry I didn't get back to your message yet... I've been busy writing R code! I see that the issue is closed, but for your records, this is some code that will reproduce the error.

ui <- dashboardPagePlus(
header = dashboardHeaderPlus(
title = "My Application",
enable_rightsidebar = TRUE,
rightSidebarIcon = "filter",
left_menu = tagList(
dropdownBlock(
id = "selector_1", icon = icon("sliders"), title = "SELECTOR 1", label = NULL, badgeStatus = NULL
)
)
),
sidebar = dashboardSidebar(),
rightsidebar = rightSidebar(),
body = dashboardBody()
)
server <- function(input, output, session) { }
shinyApp(ui,server)

[Mad-Ram]

I ran into the same issue as well. Code that reproduces error:

library(shiny)
library(shinydashboard)
library(shinydashboardPlus)

ui <- dashboardPagePlus(
  collapse_sidebar = TRUE
  ,dashboardHeaderPlus(
    fixed = FALSE
    ,enable_rightsidebar = FALSE
    ,left_menu = tagList(
      dropdownBlock(
        id = "upload"
        ,icon = icon("file-upload") # this font-awesome icon doesn't show up
        ,title = "Upload files"
        ,badgeStatus = NULL
        ,fileInput(
          "upload"
          ,"upload a file"
        )
      )
    )
  )
  ,dashboardSidebar(disable = TRUE)
  ,dashboardBody(
    setShadow(class = "dropdown-menu")
    ,uiOutput('box_1')
  )
  ,rightsidebar = rightSidebar()
)

server <- function(input, output){
}

shinyApp(ui = ui, server = server)

[DivadNojnarg]

Please use icon = "file-upload" instead of icon = icon("file-upload"):

library(shiny)
library(shinydashboard)
library(shinydashboardPlus)

ui <- dashboardPagePlus(
  collapse_sidebar = TRUE,
  dashboardHeaderPlus(
    fixed = FALSE,
    enable_rightsidebar = FALSE,
    left_menu = tagList(
      dropdownBlock(
        id = "upload",
        icon = "file-upload",
        title = "Upload files",
        badgeStatus = NULL,
        fileInput("upload","upload a file")
      )
    )
  ),
  dashboardSidebar(disable = TRUE),
  dashboardBody(uiOutput('box_1')),
  rightsidebar = rightSidebar()
)

server <- function(input, output){
}

shinyApp(ui = ui, server = server)

It is a bit different from shiny that uses the icon function allowing either fontAwesome or glyph icons... I still have to decide whether to keep icon or just the icon name since it it misleading for users.

[Mad-Ram]

Awesome, using icon = "upload" works.

icon = "file-upload" didn't work, but I assume it's because the package doesn't include the most recent version of font-awesome.

Two non-invasive ideas to keep it as is but avoid misleading users is:

1. Add to the ?dropdownUpload documentation that the icon parameter must be type string (not icon('string') like other shiny functions)
2. Or add a check if the icon parameter is type string, and if it's not then throw an error like "icon input must be of type string".