I am using shinydashboards tabboxes and having issues with the vertical alignment of fluidrows within the tabbox such that a button renders on top of my plot.
The first tab in the tabbox contains a plot and download button each in their own fluidRow, the second tab contains a datatable and download button, each in their own fluidRow. The plot is a facet_grid, and to make it visible, I specified the height of the plot in my server. The plot renders correctly, but the UI does not seem to respond to the specified height when rendering the button, and renders the button on top of the plot.
I also specify the height of the datatable object for the data tab in the server using
renderDataTable(options = list(scrollY = "400px"){}
.
In this case, the button in the data tab renders in the correct vertical position below the data table.
Below is a reproducible example of the dashboard structure. Any input on why the button in the graph tab is rendering on top of the plot would be much appreciated.
Thanks
library(shiny)
library(shinyBS)
library(shinydashboard)
library(dplyr)
library(ggplot2)
library(lubridate)
library(DT)
# load data in long format
dat <- mtcars
dat <- dat %>%
select(c("mpg", "cyl", "disp", "drat", "wt")) %>%
gather(key = "key", value = "value", cyl, disp, drat, wt )
#############################
#The dashboard
############################
header <- dashboardHeader(title = "Title", titleWidth = 450)
sidebar <- dashboardSidebar(
sidebarMenu(
menuItem("Model", icon = icon("dashboard"), tabName = "model")
)
)
body <- dashboardBody(
tabItems(
#====================================
tabItem(tabName = "model",
#===========
fluidRow(
tabBox(side="left",
width = 8,
height = "700px",
title = "",
id = "model_tab",
tabPanel("Graph",
column(width = 12,
fluidRow(
plotOutput("plot")
), # close fluidRow
fluidRow(
downloadButton("plot_download")
) #close fluidRow
) #close column
), #close tabPanel
tabPanel("Data",
column(width = 12,
fluidRow(
DT::dataTableOutput("data",
height = "350px")
), #close fluidRow
fluidRow(
downloadButton("data_download")
) # close fluidRow
) #close column
) # close tabPabel
), # close tabBox
#===========
sidebarPanel(width = 4,
align = "left",
title = "User controls",
color = "fuchsia",
solidHeader = TRUE,
sliderInput("mpg",
"mpg",
min = 1,
max = 100,
value = 10),
sliderInput("cyl",
"cyl",
min = 5,
max = 50,
value = 10),
sliderInput("disp",
"disp",
min = 5,
max = 50,
value = 10),
sliderInput("drat",
"drat",
min = 100,
max = 300,
value = 155),
dateRangeInput("date_range",
"Date range",
start=as.Date('2020-04-01') ,
end = as.Date('2025-03-01'),
format = "yyyy-mm-dd")#,
) #close sidebarpanel
) #close fluidRow
) #close tabItem
) #close tabItems
) #close dashboardBody
#################################################
ui <- dashboardPage(header,
sidebar,
body,
skin= "purple")
#################################################
# Define server logic required to draw a histogram
server <- function(input, output, session) {
output$plot <- renderPlot({
plt <- ggplot(dat, aes(x=value, y=mpg))+
geom_point()+
facet_grid(rows=vars(unique(dat$key)))
plt
plt
}, height = 600)
output$plot_download <- downloadHandler(
filename = function() { paste(input$dataset, '.png', sep='') },
content = function(file) {
png(file)
print(plotInput())
dev.off()
})
output$data <- renderDataTable(options = list(scrollY = "400px"), {
dat
})
output$HOW_data_download <- downloadHandler(
filename = "data.csv",
content = function(file) {
write.csv(dat, file, row.names = FALSE)
}
)
}
# Run the application
shinyApp(ui = ui, server = server)