Shinydashboard侧边栏面板输入字段标签中的内联图标答案

【问题标题】：Inline icon in the label of an input field at the sidebar panel in ShinydashboardShinydashboard侧边栏面板输入字段标签中的内联图标
【发布时间】：2019-10-23 12:46:21
【问题描述】：

我对上一个问题 (How to make the size of icon consistent when using Shiny and Shinydashboard?) 有一个后续问题。

现在我想在侧边栏面板中添加一个单选按钮，并在标签末尾添加一个图标。该图标将是一个弹出框的操作链接。

我可以像我之前的帖子一样成功添加图标并更改图标大小，只是图标与单选按钮的标签不在同一行。是否可以使它们在同一行中？

代码：

# 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)

【问题讨论】：

标签： html r shiny shinydashboard shinyalert

【解决方案1】：

您可以通过将display: inline 样式添加到actionLink id 来做到这一点。这将覆盖display: block。

所以在sidebar = dashboardSidebar( 之后和sidebarMenu( 之前添加这一行：

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

【讨论】：

感谢您的回答。你知道为什么标题和图标之间有一些空格吗？是否可以删除空间？
因为margin: 6px 5px 6px 15px 看起来这是默认应用的。如果在display: inline; 之后包含margin: 0px，这应该会删除空格。我会更新答案。
感谢您的时间和帮助。我在您更新代码的答案中附上了屏幕截图。希望你不要介意。