如何在bs4Dash的descriptionBlock中让服务端渲染数值与图标同行？

问题背景 #

使用bs4Dash的descriptionBlock()时，静态数值可与numberIcon同行显示，但通过textOutput服务端渲染的数值会和图标分为两行，常规CSS和字符串拼接方法无效。

示例1：静态数值（正常同行） #

library(shiny)
library(bs4Dash)

shinyApp(
  ui = dashboardPage(
    dashboardHeader(),
    dashboardSidebar(),
    dashboardBody(
      box(
        solidHeader = FALSE,
        title = "Status summary",
        background = NULL,
        width = 4,
        status = "danger",
        fluidRow(
          column(
            width = 6,
            descriptionBlock(
              number = "17%",
              numberColor = "pink",
              numberIcon = icon("caret-up"),
              header = "$35,210.43",
              text = "TOTAL REVENUE",
              rightBorder = TRUE,
              marginBottom = FALSE
            )
          ),
          column(
            width = 6,
            descriptionBlock(
              number = "18%",
              numberColor = "secondary",
              numberIcon = icon("caret-down"),
              header = "1200",
              text = "GOAL COMPLETION",
              rightBorder = FALSE,
              marginBottom = FALSE
            )
          )
        )
      ),
      title = "Description Blocks"
    )
  ),
  server = function(input, output) { }
)

示例2：服务端渲染数值（换行问题） #

library(shiny)
library(bs4Dash)

shinyApp(
  ui = dashboardPage(
    dashboardHeader(),
    dashboardSidebar(),
    dashboardBody(
      box(
        solidHeader = FALSE,
        title = "Status summary",
        background = NULL,
        width = 4,
        status = "danger",
        fluidRow(
          column(
            width = 6,
            descriptionBlock(
              number = textOutput("percent"),
              numberColor = "pink",
              numberIcon = icon("caret-up"),
              header = "$35,210.43",
              text = "TOTAL REVENUE",
              rightBorder = TRUE,
              marginBottom = FALSE
            )
          ),
          column(
            width = 6,
            descriptionBlock(
              number = "18%",
              numberColor = "secondary",
              numberIcon = icon("caret-down"),
              header = "1200",
              text = "GOAL COMPLETION",
              rightBorder = FALSE,
              marginBottom = FALSE
            )
          )
        )
      ),
      title = "Description Blocks"
    )
  ),
  server = function(input, output) {
    output$percent <- renderText({
      "17%"
    })
  }
)

解决方案 #

方法1：用uiOutput渲染完整数值+图标结构 #

直接在服务端生成和静态版本一致的DOM结构，避免textOutput的<div>容器干扰布局：

library(shiny)
library(bs4Dash)

shinyApp(
  ui = dashboardPage(
    dashboardHeader(),
    dashboardSidebar(),
    dashboardBody(
      box(
        solidHeader = FALSE,
        title = "Status summary",
        background = NULL,
        width = 4,
        status = "danger",
        fluidRow(
          column(
            width = 6,
            descriptionBlock(
              number = uiOutput("percent_with_icon"),
              numberColor = "pink",
              header = "$35,210.43",
              text = "TOTAL REVENUE",
              rightBorder = TRUE,
              marginBottom = FALSE
            )
          ),
          column(
            width = 6,
            descriptionBlock(
              number = "18%",
              numberColor = "secondary",
              numberIcon = icon("caret-down"),
              header = "1200",
              text = "GOAL COMPLETION",
              rightBorder = FALSE,
              marginBottom = FALSE
            )
          )
        )
      ),
      title = "Description Blocks"
    )
  ),
  server = function(input, output) {
    output$percent_with_icon <- renderUI({
      tagList(
        span("17%"),
        icon("caret-up")
      )
    })
  }
)

方法2：调整CSS强制inline布局 #

针对descriptionBlock的百分比容器和textOutput生成的元素设置flex布局：

library(shiny)
library(bs4Dash)

shinyApp(
  ui = dashboardPage(
    dashboardHeader(),
    dashboardSidebar(),
    dashboardBody(
      tags$head(
        tags$style(HTML("
          .description-block .description-percentage {
            display: flex;
            align-items: center;
            gap: 4px; /* 控制数值和图标间距 */
          }
          .description-block .description-percentage > div {
            display: inline-block;
            margin: 0;
          }
        "))
      ),
      box(
        solidHeader = FALSE,
        title = "Status summary",
        background = NULL,
        width = 4,
        status = "danger",
        fluidRow(
          column(
            width = 6,
            descriptionBlock(
              number = textOutput("percent"),
              numberColor = "pink",
              numberIcon = icon("caret-up"),
              header = "$35,210.43",
              text = "TOTAL REVENUE",
              rightBorder = TRUE,
              marginBottom = FALSE
            )
          ),
          column(
            width = 6,
            descriptionBlock(
              number = "18%",
              numberColor = "secondary",
              numberIcon = icon("caret-down"),
              header = "1200",
              text = "GOAL COMPLETION",
              rightBorder = FALSE,
              marginBottom = FALSE
            )
          )
        )
      ),
      title = "Description Blocks"
    )
  ),
  server = function(input, output) {
    output$percent <- renderText({
      "17%"
    })
  }
)

方案说明 #

• 方法1从DOM结构层面消除差异，兼容性更好，优先推荐；
• 方法2通过CSS修正布局，无需修改服务端逻辑，适合快速调整场景。

内容的提问来源于stack exchange，提问作者RegressionSquirrel