layout_column_wrap() element heights on mobile

[gadenbuie]

layout_column_wrap() has three arguments for controlling height:

• height sets the height of the entire layout
• height_mobile sets the height of the entire layout on mobile devices
• heights_equal determines if every element in the grid will have the same height.

What's odd about height and height_mobile is that they apply to the entire layout_column_wrap() layout, whereas the width argument applies to each item.

(The documentation also uses the word card to refer to items in the layout in both width and height.)

Furthermore, on mobile devices, when heights_equal = "all" (the default), we keep the grid-auto-rows: 1fr property on mobile as well, which can lead to odd spacing between elements because each item is given the same space as the tallest item in the layout.

Some options:

• We could unset grid-auto-rows for mobile screen sizes,
• We could add an argument heights_equal_mobile = "row",
• or we could do a better job of calling out how this argument relates to mobile sized layouts.

Here's an example app:

library(shiny)
library(bslib)
library(htmltools)

ui <- page_fixed(
  layout_column_wrap(
    div(class = "bg-primary", style = css(height = "300px")),
    div(class = "bg-secondary", style = css(height = "400px")),
    div(class = "bg-danger", style = css(height = "500px"))
  )
)

server <- function(input, output, session) {

}

shinyApp(ui, server)

Desktop	Mobile

With heights_equal = "row", this layout looks like this.

Desktop	Mobile