Auto scroll in panel in R shiny

[Ankush]

Hi, I am trying to auto scroll in the panel section of my app. But it is not auto scrolling. I have to do it manually. My code is-

ui<- fluidPage(titlePanel("Application"),
               fluidRow(column( width = 8,
                                panel(style = "overflow-y:scroll; max-height: 300px; position:relative; align: centre",
                                      textInput("message", label = "",placeholder = "Type your message here."),
                                      actionButton("send", "Send"), heading = "Education", status = "primary")
               )
               ))

server<- function(input, output, session)
{
  clearInput<- function()
  {
    updateTextInput(session,"message", value = "")
  }
  
  observeEvent(input$send,{
    #Case 1
    insertUI(
      selector = "#message",
      where = "beforeBegin",
      ui=div(class="registration",
             div(class="bubble",
                 wellPanel(
                   p("Please enter your Name")
                 )
             )))
    
    
    if(grepl("^[a-zA-Z][a-zA-Z ]+[a-zA-Z]$",input$message, perl=T))
    {
      insertUI(
        selector = "#message",
        where = "beforeBegin",
        ui=div(class="registration",
               div(class="bubble",
                   wellPanel(
                     p(input$message),
                     p("Please enter your Number")
                   )
                   
               )))
      clearInput()
    }
    
  })
}
shinyApp(ui,server)

[nirgrahamuk]

library(shiny)
library(shinyjs)
library(shinyWidgets)
ui<- fluidPage(titlePanel("Application"),
               useShinyjs(),
               fluidRow(column( width = 8,
                                panel(style = "overflow-y:scroll; max-height: 300px; position:relative; align: centre",
                                      textInput("message", label = "",placeholder = "Type your message here."),
                                      actionButton("send", "Send"),
                                      div(id="bottom", "I'm at the bottom, javascript can scroll me into view"),
                                      heading = "Education", status = "primary")
               )
               ))

server<- function(input, output, session)
{
  clearInput<- function()
  {
    updateTextInput(session,"message", value = "")
  }
  
  observeEvent(input$send,{
    #Case 1
    insertUI(
      selector = "#message",
      where = "beforeBegin",
      ui=div(class="registration",
             div(class="bubble",
                 wellPanel(
                   p("Please enter your Name")
                 )
             )),
      ,
      immediate = TRUE)
    
    
    if(grepl("^[a-zA-Z][a-zA-Z ]+[a-zA-Z]$",input$message, perl=T))
    {
      insertUI(
        selector = "#message",
        where = "beforeBegin",
        ui=div(class="registration",
               div(class="bubble",
                   wellPanel(
                     p(input$message),
                     p("Please enter your Number")
                   )
                   
               )),
        immediate = TRUE)
      clearInput()
    }
    
    runjs('
      document.getElementById("bottom").scrollIntoView();
    ')
    
  })
}
shinyApp(ui,server)

[Ankush]

If I have multiple observeEvents(like action button, SelectInput), then should I have to place the same function in every event?

[nirgrahamuk]

you need it wherever you want the behaviour -you could wrap it in a small function for convenience

[Ankush]

Thanks