renderUI does not work with fillPage

Question

I have the following simple working shiny app:

if (interactive()) {
    ui <- fillPage(
        fillRow(
            fillCol(".", style = "background-color: red;", height = "10%"),
            fillCol(".", style = "background-color: blue;", height = "10%")
        )
    )
    server <- function(input, output, session) {}
    shinyApp(ui, server)
}

And result is exactly what I want but if I try to achieve the same with renderUI I get an empty page.

I tried to make it with follow code:

if (interactive()) {
    ui <- fillPage(
        uiOutput("back")
    )
    server <- function(input, output, session) {
        output$back <- renderUI({
            fillRow(
                fillCol(".", style = "background-color: red;", height = "10%"),
                fillCol(".", style = "background-color: blue;", height = "10%")
            )
        })
    }
    shinyApp(ui, server)
}

Answer 1

this is a typical problem when working with height:100%. the use of uiOutput adds one div around the you the result of renderUI and unfortunate does this div have an height of 0 by default. The fix set height to 100% for this div as well.

if (interactive()) {
  ui <- fillPage(
    uiOutput("back",style = "height:100%;")
  )
  server <- function(input, output, session) {
    output$back <- renderUI({
      fillRow(
        fillCol(".", style = "background-color: red;", height = "10%"),
        fillCol(".", style = "background-color: blue;", height = "10%")
      )
    })
  }
  shinyApp(ui, server)
}

Hope this helps!