creating a space between shinyapp outputs in the mainPanel

Question

For the code below, I need to create a space between leafletOutput maps. I tried this by adding br()s but it only creates space for some of the map outputs. My attempted code appears in the second chunk of code below.

#My original code

 mainPanel(
    fluidRow(
      column(width = 4,shinyjs::useShinyjs(), leafletOutput("svi", height = "500px")),
      column(width = 4, shinyjs::useShinyjs(), leafletOutput("BlackP", height = "500px")),
      column(width = 4,shinyjs::useShinyjs(), leafletOutput("bi_svi_BlackP", height = "500px")),
      column(width = 4, shinyjs::useShinyjs(), leafletOutput("BlackACS", height = "500px")),
      column(width = 4, shinyjs::useShinyjs(), leafletOutput("BlackP_dup", height = "500px")),
      column(width = 4, shinyjs::useShinyjs(), leafletOutput("bi_ACSB_BlackP", height = "500px")),
      column(width = 4, shinyjs::useShinyjs(), leafletOutput("HispanicACS", height = "500px")),
      column(width = 4, shinyjs::useShinyjs(), leafletOutput("HispanicP", height = "500px"))
      )

#My attempted code

     mainPanel(
        fluidRow(
          column(width = 4,shinyjs::useShinyjs(), leafletOutput("svi", height = "500px")),
br(),
          column(width = 4, shinyjs::useShinyjs(), leafletOutput("BlackP", height = "500px")),
br(),
          column(width = 4,shinyjs::useShinyjs(), leafletOutput("bi_svi_BlackP", height = "500px")),
br(),
          column(width = 4, shinyjs::useShinyjs(), leafletOutput("BlackACS", height = "500px")),
br(),
          column(width = 4, shinyjs::useShinyjs(), leafletOutput("BlackP_dup", height = "500px")),
br(),
          column(width = 4, shinyjs::useShinyjs(), leafletOutput("bi_ACSB_BlackP", height = "500px")),
br(),
          column(width = 4, shinyjs::useShinyjs(), leafletOutput("HispanicACS", height = "500px")),
br()
          column(width = 4, shinyjs::useShinyjs(), leafletOutput("HispanicP", height = "500px"))
          )

Maybe use `\n` or `\r` see https://stackoverflow.com/questions/15433188/what-is-the-difference-between-r-n-r-and-n — Tribaldi, Feb 16 '23 at 21:50
Can you share a small reprex? Are you adding trying to add vertical or horizontal space? One thing that jumps out here is the column widths. Most shiny apps use a bootstrap grid where the total width of a row should be 12 - you've tried to put things totalling width 32 into something that's width 12. Did you try either reducing column width or splitting into multiple rows? — nrennie, Feb 16 '23 at 22:18

score 1 · Answer 1 · answered Feb 16 '23 at 23:59

Here is a solution:

 mainPanel(
    fluidRow(
      column(width = 4,shinyjs::useShinyjs(), leafletOutput("svi", height = "500px")),
      column(width = 4, shinyjs::useShinyjs(), leafletOutput("BlackP", height = "500px")),
      column(width = 4,shinyjs::useShinyjs(), leafletOutput("bi_svi_BlackP", height = "500px"))),
    br(),
      fluidRow(
      
      column(width = 4, shinyjs::useShinyjs(), leafletOutput("BlackACS", height = "500px")),
      column(width = 4, shinyjs::useShinyjs(), leafletOutput("BlackP_dup", height = "500px")),
      column(width = 4, shinyjs::useShinyjs(), leafletOutput("bi_ACSB_BlackP", height = "500px"))),
    br(),
    fluidRow(
      column(width = 4,shinyjs::useShinyjs(), leafletOutput("svi_dup", height = "500px")),
      column(width = 4, shinyjs::useShinyjs(), leafletOutput("HispanicP", height = "500px"))),
    br(),
    fluidRow(
      column(width = 4, shinyjs::useShinyjs(), leafletOutput("HispanicACS", height = "500px")),
      column(width = 4, shinyjs::useShinyjs(), leafletOutput("HispanicP_dup", height = "500px")))
              ),

creating a space between shinyapp outputs in the mainPanel

1 Answers1