disable bslib::value_box compact view below 300px

[leonsamson]

Value boxes in the bslib package have a 'normal' and a 'compact' view since a CSS refactoring (bslib version 0.6.0 and higher if I am correct).

If the boxes are less then 300px, the boxes will default to the 'compact' view:

I want the showcase and the titles/values always to be on the same place, even if the value boxes are smaller than 300px. Thus, my question is: is there a way to easily disable this compact view?

Thus, desired result, below 300px:

A workaround would be to set the width in bslib::layout_column_wrap()to something larger than 300px, but for my application I need the boxes to be a bit smaller than 300px before they will wrap to a second line.

For the figures above, I used the example taken straight from the bslib website:

library(bslib)
library(shiny)
library(bsicons)
vbs <- list(
  value_box(
    title = "1st value",
    value = "123",
    showcase = bs_icon("bar-chart"),
    theme = "purple",
    p("The 1st detail")
  ),
  value_box(
    title = "2nd value",
    value = "456",
    showcase = bs_icon("graph-up"),
    theme = "teal",
    p("The 2nd detail"),
    p("The 3rd detail")
  ),
  value_box(
    title = "3rd value",
    value = "789",
    showcase = bs_icon("pie-chart"),
    theme = "pink",
    p("The 4th detail"),
    p("The 5th detail"),
    p("The 6th detail")
  )
)

layout_column_wrap(
  width = "250px",
  !!!vbs
)

[leonsamson]

I found the solution. In a call to bslib::bs_theme() you can set the variable bslib-value-box-horizontal-break-point Setting this threshold to a low value 'disables' the compact value box view.

I am now using something like this:

 bslib::page_navbar(
      theme = bslib::bs_theme("bslib-value-box-horizontal-break-point" = "1px")
)

I found the solution in a closed issue report on github:

Value box vertically stacked when window width reduces

[randyzwitch]

Thanks for following-up @leonsamson, glad you found the answer!

Best,
Randy