CODEWITHSUNDEEP
rlayoutshiny
dtanon
dtanon

Reputation: 303

fix item (button) in R Shiny UI so it doesn't move

I am quite new to Shiny R, so I don't know of I'm missing something obvious.

I have created an UI with action buttons in the side panel. When a button is clicked, the user chooses a folder, and the content of the folder is shown in text underneath the button as a new item.

However, the button underneath the first button shifts downwards when the text appears. So everything moves when a new item appears, based on user input.

I think this does not look nice, is there a way to keep the items (action buttons) in their place, even as new items appear? E.g by fixing the items in a place, so there is enough space for new items to appear.

Here is my code to create the layout. 

ui <- fluidPage(
  titlePanel(h2("title")),
  sidebarLayout(
    sidebarPanel(
shinyDirButton("myFolder", "Click to select folder with input files" ,
                            title = "Select the input folder",
                            buttonType = "default", class = NULL),
             h4("Content of input folder"),
             verbatimTextOutput("table1", placeholder = T),
             br(),

             shinyFilesButton("newFile", "Click to select file" ,
                              title = "Select file",
                              buttonType = "default", class = NULL, multiple = F),
             textOutput("filepathShow")
   )
  )
 )



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

  observe({
  shinyDirChoose(input, "myFolder", roots = c(home = '~'), session = session)
   myInputDir2 <- parseDirPath(c(home = '~'), input$myFolder)
   listText <- list.files(myInputDir2, full.names = F)
   mylist <- data.frame(listText)

  output$table1 <- renderText(paste(mylist[,1], collapse = ", "))


      shinyFileChoose(input, "newFile", roots = c(home = '~'), session = session)
      myFile <- parseFilePaths(c(home = '~'), input$newFile)
      myfilepath <- myFile$datapath

      output$filepathShow <- renderText(as.character(myfilepath))
})
}

Upvotes: 0

Views: 246

Answers (1)

Winicius Sabino
Winicius Sabino

Reputation: 1506

I think this solves your problem, put the text inside a div with overflow: auto and set the height you want

  h4("Content of input folder"),
  HTML("<div style ='overflow:auto; height: 180px;'>"),
  verbatimTextOutput("table1", placeholder = T),
  HTML("</div>"),

Upvotes: 1

Related Questions