rshinyshinydashboardhtmlwidgets

How to stop html widget from moving to the bottom of the shiny app following input


I am trying to embed a custom html widget (ideogram) into a box in a shiny-dashboard which receives an input file and draws a plot. However, when I upload a file the widget moves from the intended box (title="Title1") to bottom of dashboard app. Please could you help retain the plot in the box (Title 1).

library(shiny)
library(ideogram)
library(shinydashboard)
library(shinyFeedback)

sidebar <- dashboardSidebar(
  menuItem("page1", tabName="page1")
)

body <-   dashboardBody(
    tabItem(
      tabName="page1",
      fluidRow(
        box(
          title = "Title1",
          width = 8,
          ideogramOutput("ideogram_plot")
        ),
        box(
          title="Files",
          width=4,
          fileInput("infile", "Upload",
                    accept=c(".seg"))
        )
      ),
      fluidRow(
        box(
          width=12,
          height="50%"
        )
      )
    )
  )

ui <- dashboardPage(
  dashboardHeader(title="Main Title"),
  sidebar,
  body
)

server <- function(input, output, session) {

  data <- reactive({
    req(input$infile)
    ext=tools::file_ext(input$infile$name)
    switch(ext,
           seg=input$infile$datapath,
           txt=input$infile$datapath,
           validate("Error")
    )
  })

  # render plot
  output$ideogram_plot <- renderIdeogram({
    ideogram({data()})
  })

}

shinyApp(ui, server)

Solution

  • The CSS selector of the container for the widget was set to body rather than of the element.