Nested uiOutput gives incorrect width and uiOutput controlbar = NULL doesn't work

Question

So my question is two-fold regarding uiOutput:

1. I create the tab Data via uiOutput. In the output of that tab I have other uiOutput. However that output gives incorrect width of the cards, why?

2. If I want to add controlbar = NULL via uiOutput it doesnt work, why? I get the error:

Error in tagAssert(controlbar[[2]], type = "aside", class = "control-sidebar") : Expected an object with class 'shiny.tag'.

library(shiny)
library(bs4Dash)

ui <- dashboardPage(
  header = dashboardHeader(title = "bs4Dash Example"),
  sidebar = dashboardSidebar(
    sidebarMenu(
      id = "tabs",
      menuItem("Tab 1", tabName = "tab1", icon = icon("chart-line"))
    )
  ),
  body = dashboardBody(
    tabItems(
      tabItem(
        tabName = "tab1",
        uiOutput("tab_data")
      )
    )
  ),
  controlbar = dashboardControlbar(
    width = 300,
    actionButton("button1", "Button 1"),
    actionButton("button2", "Button 2")
  )
)

server <- function(input, output) {
  
  
  output$tab_data = renderUI({
    
    fluidRow(
      uiOutput("column_1"),
      uiOutput("column_2"),
      uiOutput("column_3")
    )
  })
  
  #column 1
  output$column_1 = renderUI({
    
        column(width = 4,
               bs4Card(title = div("Card 1", style='color:black; font-size:18px;'),
                       id = "card_1", width = NULL, height = "720px", 
                       p("Text")
               )
        )
  })
  
  #column 1
  output$column_2 = renderUI({
    
    column(width = 4,
           bs4Card(title = div("Card 2", style='color:black; font-size:18px;'),
                   id = "card_2", width = NULL, height = "720px", 
                   p("Text")
           )
    )
  })
  
  #column 1
  output$column_3 = renderUI({
    
    column(width = 4,
           bs4Card(title = div("Card 3", style='color:black; font-size:18px;'),
                   id = "card_3", width = NULL, height = "720px", 
                   p("Text")
           )
    )
  })
  
  
}

shinyApp(ui, server)

For Controlbar:

Add to ui:

controlbar = uiOutput("cont_bar")

Add to server:

output$cont_bar = renderUI({
    
    NULL
    
  })

Answer 1

Defining the column width in the same renderUI as fluidRow() will fix your issue #1. I do not see an error if I define uiOutput("cont_bar") inside dashboardControlbar(). Try this

library(shiny)
library(bs4Dash)

ui <- dashboardPage(
  header = dashboardHeader(title = "bs4Dash Example"),
  sidebar = dashboardSidebar(
    sidebarMenu(
      id = "tabs",
      menuItem("Tab 1", tabName = "tab1", icon = icon("chart-line"))
    )
  ),
  body = dashboardBody(
    tabItems(
      tabItem(
        tabName = "tab1",
        uiOutput("tab_data")
        
      )
    )
  ),
  controlbar = dashboardControlbar(
    width = 300,
    actionButton("button1", "Button 1"),
    actionButton("button2", "Button 2"),
    uiOutput("cont_bar")
  )
)

server <- function(input, output) {
  
  output$tab_data = renderUI({
    
    fluidRow(
      column(4,uiOutput("column_1")),
      column(4,uiOutput("column_2")),
      column(4,uiOutput("column_3"))
    )
  })
  
  #column 1
  output$column_1 = renderUI({
    
    #column(width = 4,
           bs4Card(title = div("Card 1", style='color:red; font-size:18px;'),
                   id = "card_1", width=NULL, height = "720px", 
                   p("Text")
           )
    #)
  })
  
  #column 1
  output$column_2 = renderUI({
    
    #column(width = 4,
           bs4Card(title = div("Card 2", style='color:black; font-size:18px;'),
                   id = "card_2", width = NULL, height = "720px", 
                   p("Text")
           )
    #)
  })
  
  #column 1
  output$column_3 = renderUI({
    
    #column(width = 4,
           bs4Card(title = div("Card 3", style='color:blue; font-size:18px;'),
                   id = "card_3", width = NULL, height = "720px", 
                   p("Text")
           )
    #)
  })
  
  output$cont_bar = renderUI({
    
    NULL
    
  })
  
}

shinyApp(ui, server)