Quantcast
Channel: Active questions tagged r - Stack Overflow
Viewing all articles
Browse latest Browse all 201941

Shinydashboard: Incorrect vertical rendering of items in tabbox

$
0
0

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)



Viewing all articles
Browse latest Browse all 201941

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>