4

In Shiny I use a horizontal radioGroupButtons input with huge number of items. If you click on one of the items, the color of the label of the button changes. This works actually fine.

However, if I click on one of the last items so that I have scroll far to the right, the scroll position resets.

So after each click I have to move to the right again if I want to continue with the next item.

Is there a solution so that the scroll position is retained after each click?

This is the code:

library(shiny)
library(shinyWidgets)

ui <- fluidPage(uiOutput("selItem"))

server <- function(input, output, session)
{
  global <- reactiveValues(itemNames=NULL, itemValues=NULL)

  observe(
  {
    options <- c("word01", "word02", "word03", "word04", "word05", "word06", "word07", "word08", "word09", "word10", "word11", "word12", "word13", "word14", "word15", "word16", "word17", "word18", "word19", "word20", "word21", "word22", "word23", "word24", "word25", "word26", "word27", "word28", "word29", "word30", "word31", "word32", "word33", "word34", "word35", "word36","word37", "word38", "word38", "word39", "word40", "word41", "word42", "word43", "word44", "word45", "word46", "word47")

    global$itemNames  = options
    global$itemValues = options
  })

  output$selItem <- renderUI(
  {
    fluidRow(
      style = "overflow-x: scroll;",
      radioGroupButtons(inputId = "replyItem", label = NULL, choiceNames = global$itemNames, choiceValues = global$itemValues, selected = character(0), individual = TRUE, width = "10000px")
    )
  })

  observeEvent(input$replyItem,
  {
    index <- which(global$itemValues==input$replyItem)
    global$itemNames[index] <- HTML(paste0("<span style='color: #0000ff'>", global$itemValues[index], "</span>"))
  })
}

shinyApp(ui = ui, server = server)
WJH
  • 539
  • 5
  • 14
  • Although for datatable, see if this provides any clues [scroll to row based on user event, R/DT/Shiny, without using paging](https://stackoverflow.com/questions/52492179/scroll-to-row-based-on-user-event-r-dt-shiny-without-using-paging) – Shree Sep 10 '19 at 14:25
  • 2
    Making the fluidRow rendering reactive is the problem. Put the fluidRow and style into the static UI and only renderUI the radio group buttons. – Ryan Morton Sep 11 '19 at 00:47
  • 1
    You bet. Otherwise, there may be a way to `isolate()` the fluidRow if it absolutely HAS to be rendered by the server. – Ryan Morton Sep 11 '19 at 17:27
  • I have a similar problem whe nusing `DT` datatable https://stackoverflow.com/questions/67299900/wide-datatables-causing-scrollx-to-scroll-back-when-applying-filters?noredirect=1#comment119126981_67299900, – AOE_player May 05 '21 at 14:20

0 Answers0