How to ensure that value boxes will stay the same size on any screen/browser window size?

[udurraniAtPresage]

On a bigger browser window, value boxes display as:

But at a smaller width of browser, they look like this:

Any ideas how to keep the size consistent, i.e., the second box should be of the same size as the others?

Following is my value box code. I have even tried string padding.

value_box(
        title = str_pad(title, width = 15, side = "right", pad = " "), 
        value =   score,
        paste(
          "Average", average_score
        ),
        showcase = img(
          src = paste0(img_src, ".png"),
          height = "100%",
          width = "100%",
          style = "object-fit: contain; overflow: auto;"
        ),
        showcase_layout = showcase_top_right(),
        full_screen = TRUE
      )

[cpsievert]

What are you using to layout the value boxes? I'm pretty sure if you use layout_column_wrap() or layout_column() they'll all be the same height (by default)

[udurraniAtPresage]

Thanks! I was using layout_columns but replacing it with layout_column_wrap() worked.

[udurraniAtPresage]

This also works for me as you showed. The only other thing different in my code is that my value boxes are rendered via renderUI because I update the value argument after some calculations in the server. The ui part of the module contains uiOutput. Could that be an issue?

[gadenbuie]

Yes that could be it! Are you rendering each value box individually? If so, be sure to set uiOutput(fill = TRUE). Alternatively you could move the entire layout_columns() into the renderUI(). Either one should work! Let me know how that goes 😄

[udurraniAtPresage]

Yes, I am rendering each value box individually via a module. Setting uiOutput(fill = TRUE) works! Thank you.

[udurraniAtPresage]

Related question: layout_columns works great at resizing the value boxes on smaller screens. However, a longer title in a value box splits into two lines. For example, on iPad Pro, the title "Professionalism" splits to "Profession" on first line and "alism" in the second line. Is there a bslib way to automatically resize the font to keep the title in a single line?

[gadenbuie]

That's great to hear about layout_columns()! Unfortunately, we don't have an easy or automatic way to resize the text in the value box to match the container size. It'd be a neat feature! For now, I'd recommend trying to write some CSS to target that value box.