CODEWITHSUNDEEP
rshiny
Ankush Rana
Ankush Rana

Reputation: 27

How to apply auto scroll in the panel section of my app?

I have a panel in my UI. The requirement is whenever an event takes place, the panel shall go to down automatically, without manually scrolling down. I try using Jscript but no solution.

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)

Upvotes: 0

Views: 85

Answers (1)

St&#233;phane Laurent
St&#233;phane Laurent

Reputation: 84529

To autoscroll when the send button is clicked:

js <- "
$(document).on('shiny:inputchanged', function(event) {
  if (event.name === 'send') {
    var $panel = $('#panel');
    $panel.animate({scrollTop: $panel.prop('scrollHeight')});
  }
});
"

ui<- fluidPage(
  tags$head(tags$script(HTML(js))),
  titlePanel("Application"),
  fluidRow(
    column(
      width = 8,
      panel(id = "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)

If you want to autoscroll when an input with id input1 or an input with id input2 changes, replace

if (event.name === 'send') {

with

if ((['input1','input2']).indexOf(event.name) > -1) {

Upvotes: 2

Related Questions