bslib::value_box在bs4Dash中显示布局异常求助

问题背景 #

在bs4Dash框架的Shiny应用中，尝试实现带plotly交互式迷你图的bslib value_box，参考相关示例后，通过renderUI/uiOutput实现的组件在应用中数值与迷你图的比例、位置不符合预期，但在RStudio Viewer面板显示正常，需要让应用内的渲染效果与示例一致。

解决方案 #

问题根源在于bs4Dash的box组件自带样式与bslib的value_box冲突，同时部分参数设置影响布局。以下是修改后的可运行代码：

## app.R ##
library(shiny)
library(plotly)
library(dplyr)
library(bs4Dash)
library(bslib)

ui <- bs4DashPage(
  dashboardHeader(title = "Test Dash"),
  bs4DashSidebar(
    sidebarMenu(id = "tab",
                menuItem("Test 1", tabName = "t1", icon = icon("dashboard")),
                menuItem("Test 2", tabName = "t2", icon = icon("triangle-exclamation"))
    )
  ),
  bs4DashBody(
    tabItems(
      tabItem(tabName = "t1",
              fluidRow(
                # 移除嵌套的bs4Dash box，直接设置uiOutput宽度
                uiOutput("papq_vbox_quote", width = "25%")
              )               
      ),
      tabItem(tabName = "t2")
    )
  )
)

server <- function(input, output) {
  
  dat <- tibble(Date = seq(Sys.Date()-59, Sys.Date(), by = 1),
                measure = rnorm(length(Date), 20 + (Date - min(Date)), 5))
  
  output$papq_vbox_quote <- renderUI({
    
    sparkline <- plot_ly(dat) %>%
      add_lines(
        x = ~Date, y = ~measure,
        color = I("white"), span = I(1),
        fill = 'tozeroy', alpha = 0.2
      ) %>%
      layout(
        xaxis = list(visible = F, showgrid = F, title = ""),
        yaxis = list(visible = F, showgrid = F, title = ""),
        hovermode = "x",
        margin = list(t = 0, r = 0, l = 0, b = 0),
        font = list(color = "white"),
        paper_bgcolor = "transparent",
        plot_bgcolor = "transparent"
      ) %>%
      config(displayModeBar = F) %>%
      htmlwidgets::onRender(
        "function(el) {
          var ro = new ResizeObserver(function() {
             var visible = el.offsetHeight > 200;
             Plotly.relayout(el, {'xaxis.visible': visible});
          });
          ro.observe(el);
        }"
      )
    
    value_box("Series Data",
              value = formatC(mean(dat$measure), format = "d", big.mark = ","),
              showcase = sparkline,
              showcase_layout = showcase_left_center(),
              # 移除全屏设置，固定高度保证比例
              height = "120px",
              theme_color = "success"
    )
  })
  
}

options(shiny.host = '0.0.0.0')
options(shiny.port = 8080)

shinyApp(ui, server)

修改说明 #

1. 移除嵌套的bs4Dash box：bslib的value_box本身是独立卡片组件，嵌套在bs4Dash的box中会引入额外内边距和布局约束，直接给uiOutput设置width="25%"对应原box(width=3)的宽度比例。
2. 调整value_box参数：移除full_screen=TRUE避免过度拉伸，设置固定height确保数值与迷你图的比例稳定。
3. 保留plotly原有配置：透明背景、隐藏坐标轴及ResizeObserver逻辑均保留，适配不同显示需求。

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