Inline icon in the label of an input field at the sidebar panel in Shinydashboard

Question

I have a follow-up question of my previous question (How to make the size of icon consistent when using Shiny and Shinydashboard?).

Now I want to add a radio button in the sidebar panel and also add an icon at the end of the label. This icon will be an action link to a pop-up box.

I can add icon and change the icon size successfully as my previous post except that the icon is not in the same line as the label of the radio button. Is it possible to make them in the same line?

Code:

# Load the packages
library(shiny)
library(shinydashboard)
library(shinyalert)

# User Interface
ui <- dashboardPage(
  header = dashboardHeader(title = ""),
  sidebar = dashboardSidebar(
    sidebarMenu(
      menuItem(
        text = "Example",
        tabName = "tab1"
      ),
      radioButtons(inputId = "radio", choices = c("Yes", "No"),
                   label = HTML("A Radio Button", "<font size='3'>",
                   as.character(actionLink(inputId = "info4", 
                                           label = "", 
                                           icon = icon("info"))), "</font>"))
    )
  ),
  body = dashboardBody(
    # A call to use the shinyalert package
    useShinyalert(),

    tabItems(
      tabItem(
        tabName = "tab1",
        h2(HTML("This is a title", "<font size='3'>",
                as.character(actionLink(inputId = "info1", 
                                        label = "", 
                                        icon = icon("info"))), "</font>")),
        fluidRow(
          box(
            title = HTML("This is the title of the box", "<font size='3'>",
                         as.character(actionLink(inputId = "info2", 
                                                 label = "", 
                                                 icon = icon("info"))), "</font>"), 
            status = "primary", solidHeader = TRUE,
            selectInput(inputId = "Select", 
                        label = HTML("This is the title of the selectInput", "<font size='3'>", as.character(actionLink(inputId = "info3", 
                                                                                                                        label = "", 
                                                                                                                        icon = icon("info"))), "</font>"
                        ), 
                        choices = 1:3)
          )
        )
      )
    )
  )
)

server <- function(input, output, session){
  observeEvent(input$info1, {
    shinyalert(text = "Info 1", type = "info")
  })
  observeEvent(input$info2, {
    shinyalert(text = "Info 2", type = "info")
  })
  observeEvent(input$info3, {
    shinyalert(text = "Info 3", type = "info")
  })
  observeEvent(input$info4, {
    shinyalert(text = "Info 4", type = "info")
  })
}

# Run the app
shinyApp(ui, server)

score 2 · Accepted Answer · edited Oct 23 '19 at 04:46

2

You can do this by adding display: inline style to the actionLink id. This will override display: block.

So just after sidebar = dashboardSidebar( and before sidebarMenu( add this line:

tags$head(
  tags$style(
    HTML("#info4 {
         display: inline;
         margin: 0px;
         }")
  )
),

edited Oct 23 '19 at 04:46

www

38,575
12
48
84

answered Oct 23 '19 at 04:27

MKa

2,248
16
22

Thanks for your answer. Do you know why there is some space between the title and the icon? Is it possible to remove the space? – www Oct 23 '19 at 04:38
1

Its because of `margin: 6px 5px 6px 15px` it looks like this is being applied by default. If you include `margin: 0px` after `display: inline;` this should remove space. I will update the answer. – MKa Oct 23 '19 at 04:42
Thanks for your time and help. I attached a screenshot to your answer for your updated code. I hope you don't mind. – www Oct 23 '19 at 04:47

Inline icon in the label of an input field at the sidebar panel in Shinydashboard

1 Answers1