rquartobslib

How to remove the expand button from the value box in a Quarto dashboard?


I'd like to create value boxes using the bslib library for a dashboard created with R Quarto. By default, the Expand button is displayed in the bottom right corner. This makes little sense in the context of my dashboard, so I'd like to hide it. The value_box function in the bslib library offers the full_screen argument set to FALSE. However, the Expand button is still displayed. Therefore, I used the expandable argument set to false in the code chunk. Unfortunately, the Expand button is still displayed.

```{r}
library(palmerpenguins)
library(bslib)
library(bsicons)
```

```{r}
#| expandable: false

value_box(
  title = "Mittlere Schnabellänge (mm)",
  value = mean_bill_length,
  showcase = bsicons::bs_icon("arrow-right-square"),
  theme = value_box_theme(bg = "darkviolet", fg = "white"),
  class = "border", 
  full_screen = FALSE
)
```

Expand button in a value box


Solution

  • You can add the css

    .card[data-full-screen="false"]:hover > * > .bslib-full-screen-enter {
      display: none;
    }
    

    It hides the element (.bslib-full-screen-enter) on a card. However, it is very global and also applies on other elements where one maybe want to keep the button. You can add a custom class to the value box and then only target by this class:

    ---
    title: "Untitled"
    format: dashboard
    ---
    
    ```{css}
    .card.noExpandable[data-full-screen="false"]:hover > * > .bslib-full-screen-enter {
      display: none;
    }
    ```
    
    ```{r}
    library(bslib)
    library(bsicons)
    ```
    
    ```{r}
    value_box(
      title = "Mittlere Schnabellänge (mm)",
      value = 123,
      showcase = bsicons::bs_icon("arrow-right-square"),
      theme = value_box_theme(bg = "darkviolet", fg = "white"),
      class = "border noExpandable"
    )
    ```