简体   繁体   中英

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.

在此处输入图像描述

## 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)

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"))

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM