2

I have noticed that whenever you click on the label for any R Shiny sliderInput control, the window scrolls to the top of the page. To illustrate this, place a sliderInput further down on a page (e.g. after a large block of text or a chart, and then click its label. Page scrolls to top.

How do I suppress this behavior? I have a bunch of sliders for user to interact with, much further down on the page.. I do not want them to keep having to scroll back down just to interact with the next slider.

Minimum ui.R to reproduce (based on hello shiny welcome tutorial):

library(shiny)

shinyUI(fluidPage(

  # Application title
  titlePanel("Old Faithful Geyser Data"),

  # Sidebar with a slider input for number of bins
  sidebarLayout(
    sidebarPanel(
      p('nothing in sidebar')
    ),

    # Show a plot of the generated distribution
    mainPanel(
      plotOutput("distPlot"),
      p('Lorem Ipsum....'), #giant text block to trigger vertical scrollbars in browser.
sliderInput("bins",
                  "Number of bins:",
                  min = 1,
                  max = 50,
                  value = 30)
    )
  )
))
yen
  • 1,769
  • 2
  • 15
  • 43

1 Answers1

1

I never realized that before!

It looks like this is happening because the actual HTML input element is at the top of the page, and clicking on the label brings you to where the input is. The actual slider that you're seeing is a modified version of the input that is created with javascript, but the actual HTML input that has an ID of "bins" is at the top of the page. This is a bit technical, but hopefully it makes sense.

This won't happen with most other shiny inputs that don't push the original HTML input tag to the top of the page.

In this case, one easy workaround is to use add your own label and use label = NULL in the input. For example:

  tags$label("Number of bins:"),
  sliderInput("bins",
              label = NULL,
              min = 1,
              max = 50,
              value = 30)
DeanAttali
  • 25,268
  • 10
  • 92
  • 118
  • Yeah, in the end I set label to NULL but used a plain span tag to output a label... didn't realize `tags$label()` was a thing I could use. Great! Thx! – yen Nov 01 '17 at 08:29
  • Hopefully the explanation of why that happened was helpful too :) – DeanAttali Nov 01 '17 at 08:41