firmo23
firmo23

Reputation: 8454

Skip empty space between 2 fluidRows in a shinydashboard

I have the shinydashboard below in which I have almost eliminated the header and add an image at the top of the body. Below it there are two rows of boxes the issue is that there is too much wasted blank space between the image and the fluidRow() as you can see in the scrshot.

enter image description here

## app.R ##
library(shiny)
library(shinydashboard)
library(shinyjs)
library(tableHTML)
ui <- dashboardPage(
  dashboardHeader(titleWidth = 0,
                 
                  tags$li(class = "dropdown",
                          tags$style(".main-header {max-height: 0px}"),
                          tags$style(".main-header .logo {height: 0px;}"),
                          tags$style(".sidebar-toggle {height: 0px; padding-top: 0px !important;}"),
                          tags$style(".navbar {min-height:0px !important}")
                  ) ),
  dashboardSidebar(
    checkboxGroupInput("box", "Select box",
                       c("Red", "Green", "Blue", "Yellow"),selected = "Red")
  ),
  dashboardBody(
    fluidRow(
      imageOutput("image"), # IMAGE TOO BIG AND BOX CANNOT COMPLETELY CONTAIN IT
      
    ),
    fluidRow(
      column(4,uiOutput("box1")),
      column(4,uiOutput("box2")),
      column(4,uiOutput("box3"))
      
      
    ),
    fluidRow(
      column(4,uiOutput("box4"))
      
    ),
    tags$script("document.getElementsByClassName('sidebar-toggle')[0].style.visibility = 'hidden';")
    
  )
)


server <- function(input, output) {
  output$box1<-renderUI({
    if("Red" %in% input$box)
      box(
        
        "Red",height = 300,width = 5
      )
  })
  output$box2<-renderUI({
    if("Green" %in% input$box)
      box(
        
        "Green",height = 300,width = 5
      )
  })
  output$box3<-renderUI({
    if("Blue" %in% input$box)
      box(
        
        "Blue",height = 300,width = 5
      )
  })
  output$box4<-renderUI({
    if("Yellow" %in% input$box)
      box(
        
        "Yellow",height = 300,width = 5
      )
  })
  
  output$image <- renderImage({
    filename <- normalizePath(file.path(paste0('www/', "connect-shopify-to-google-analytics", '.jpg')))
    list(
      src = filename, 
      height = 150,
      width=1700
    )
  }, deleteFile = FALSE)
}

shinyApp(ui, server)

Upvotes: 1

Views: 353

Answers (1)

firmo23
firmo23

Reputation: 8454

I solved it like

div(style = "padding: 0px 0px; margin-top:-15em",fluidRow(
          column(4,uiOutput("box1")),
          column(4,uiOutput("box2")),
          column(4,uiOutput("box3"))

Upvotes: 1

Related Questions