Skip to content

Conversation

@gadenbuie
Copy link
Member

@gadenbuie gadenbuie commented Aug 22, 2024

Fixes #434

When uiOutput() or textOutut() are used in a fillable container but are empty, users expect that those elements are entirely invisible or completely removed. In a display: flex context, however, empty divs are still included in the allocation of space.

Example app
library(shiny)
library(bslib)
# pkgload::load_all()

ui <- page_fillable(
  card(
    card_header("A"),
    input_switch("show_card_b", "Show card B", value = FALSE),
    input_switch("show_text", "Show text", value = FALSE)
  ),
  uiOutput("card_b"),
  textOutput("text"),
  card(card_header("D"))
)

server <- function(input, output, session) {
  output$card_b <- renderUI({
    req(input$show_card_b)
    card(card_header("B"))
  })

  output$text <- renderText({
    req(input$show_text)
    "This text gets regular spacing."
  })
}

shinyApp(ui, server)

Before

Notice the empty space between the two cards is almost three times larger than expected when the UI and text outputs are empty. Note that when the example app uses uiOutput("card_b", fill = TRUE), the problem is even worse.

Hidden Shown
image image

After

Hidden Shown
image image

@gadenbuie gadenbuie requested a review from cpsievert August 22, 2024 15:22
Comment on lines +21 to +22
.html-fill-container > .shiny-html-output:empty,
.html-fill-container > .shiny-text-output:empty {
Copy link
Member Author

@gadenbuie gadenbuie Aug 22, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Instead of targeting shiny output classes specifically, we could generically target empty elements

Suggested change
.html-fill-container > .shiny-html-output:empty,
.html-fill-container > .shiny-text-output:empty {
.html-fill-container > :empty {

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Consider removing empty .shiny-html-output containers from document flow in fillable containers

2 participants